如何阻止日期选择器选择今日之后的日期？Angular技术求助

在HTML中使用Clarity日期选择器，希望通过TypeScript代码程序化设置min和max日期值，限制用户无法选择超出max或低于min的日期，其中max期望设为今日日期。尝试了以下代码：

this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd', 'en')

但用户仍能选择今日之后的日期，对应的HTML代码如下：

<div id="idDateOfSprayContainer">
    <clr-date-container class="clsDateContainer">
        <label id="idDateOfSprayLabel">
            {{ "SITE.INSECTICIDES.DATE_OF_SPRAY_LABEL" | translate }}:
        </label>
        <input id="idDateOfSprayValue" class="clr-control-container" clrDate type="date" placeholder="" [(ngModel)]="iDatePasser.dateOfSpray"  name="dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)"
                value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>
    </clr-date-container>
</div>

Clarity日期选择器的[max]属性需要传入原生Date对象，而非格式化后的字符串，这是当前代码失效的核心原因。按以下步骤修正：

• 直接使用Date对象赋值
  无需用formatDate格式化，直接将maxDateLimit设为今日的Date实例，若需要精确到今日0点，可重置时分秒：

  this.maxDateLimit = new Date();
  this.maxDateLimit.setHours(0, 0, 0, 0);
  

• HTML绑定保持不变
  原HTML的[max]="maxDateLimit"绑定无需修改，Clarity会自动处理Date对象的渲染和校验逻辑。

• min值设置同理
  如果minDateLimit也是用格式化字符串设置的，同样改为Date对象，示例：设置min为30天前的日期：

  this.minDateLimit = new Date();
  this.minDateLimit.setDate(this.minDateLimit.getDate() - 30);
  

• 补充手动输入校验（可选）
  为避免用户手动输入超出范围的日期，可在ngModelChange回调中添加校验逻辑：

  onDateOfSpraySet(selectedDate: Date) {
      if (selectedDate > this.maxDateLimit) {
          this.iDatePasser.dateOfSpray = this.maxDateLimit;
      } else if (selectedDate < this.minDateLimit) {
          this.iDatePasser.dateOfSpray = this.minDateLimit;
      }
  }
  

内容的提问来源于stack exchange，提问作者Amrmsmb