如何以角度禁用特定日期之前的所有日期？

Question

我正在以角度构建一个组件（html、css、spec.ts、ts），我总是希望 endDate > startDate。我已点击此链接 https://material.angular.io/components/datepicker/overview 以制作多个日期选择器。

下面是我的 HTML startDate 和 endDate ：

开始日期：

 <div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>

结束日期：

 <div class="end-date" fxFlex="50%" fxFlexOrder="2">
           <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
        </div>

下面是我的角度代码 (ts)，我在页面加载时调用 validateForm 方法。

 ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

问题陈述：

现在我需要做的是 - 如果我在 startDate 中选择了任何日期（例如 11 月 23 日），那么在 endDate 日期选择器中，11 月 23 日之前（包括 11 月 23 日）之前的所有日期都应该是已禁用，因此我只能选择 11 月 23 日之后的日期。这可以在 Angular 中实现吗？

我们可以通过将 minDate 和 maxDate 放在 HTML 或 TS 中的某处来实现吗？

原文由 john 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您使用的是反应式表单，因此请使用表单控件。不建议有两个绑定（ ngModel 和 formControl ）。所以放下 ngModel 就像我在你之前的问题中建议的那样： https ://stackoverflow.com/a/47426879/6294072

因此，使用对象 unavailability 的值填充表单控件。

 constructor(private formBuilder: FormBuilder) {
  this.unavailabilityForm = this.formBuilder.group({
    startDate: [this.unavailability.startDate],
    endDate: [this.unavailability.endDate]
  });
}

如果您稍后收到这些值，您可以使用 patchValues ：

 this.unavailabilityForm.setValue({
  startDate: this.unavailability.startDate;
  endDate: this.unavailability.endDate;
})

否则您可以在构建表单时设置值。

然后，您唯一需要添加到第二个日期选择器的是 [min] 就像提到的其他答案一样。使用表单控件值：

 <input matInput
       [min]="unavailabilityForm.controls.startDate.value"
       formControlName="endDate" ...>

演示

原文由 AT82 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

与 [min] 绑定适用于任何日期

.ts 文件

//today's date
todayDate:Date = new Date();

//any date
someDate: Date = new Date(anydate);

.html 文件

 <mat-form-field>
        <input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Appointment date" formControlName="appointment_date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

原文由 Vedha Peri 发布，翻译遵循 CC BY-SA 4.0 许可协议