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

Question

我正在建立一个我总是想要endDate> startDate的组件（html，css，spec.ts，ts）。我按照此链接https://material.angular.io/components/datepicker/overview进行了多个日期选择。

以下是我针对startDate和的HTML 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>

现在下面是我validateForm在页面加载时调用方法的角度代码（ts）。

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？

Answer 1

与[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>

Answer 2

由于您使用的是反应形式，请利用形式控件。不建议使用两个绑定（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" ...>

演示