如何在 Mat-Date Picker 中今天之前禁用值

Question

我有两个用于安排工作的 Mat-Date Picker。 我想应用一些自定义验证，例如用户不应选择开始日期小于今天的日期并且开始日期应该小于结束日期。

我在弄清楚如何动态设置每天小于当前日期的开始日期时遇到问题。

例如：在 30/03/2020 之前的所有日期都应该被禁用。 从 31/032020 开始，即使是今天的日期也应该被禁用。

我的 HTML 代码：

<mat-form-field>
        <mat-label>Start Date</mat-label>
        <input
          matInput
          [matDatepicker]="picker"
          formControlName="startDate"
          readonly
        />
        <mat-datepicker-toggle
          matSuffix
          [for]="picker"
        ></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

打字稿代码：

this.Dategroup= new FormGroup({
  startDate: new FormControl('', [Validators.required]),
  endDate: new FormControl('', [Validators.required])
});

Answer 1

您只需要添加min属性即可禁用从今天开始的先前日期。

示例：在 html 中

   <mat-form-field>
    <mat-label>Start Date</mat-label>
    <input matInput [matDatepicker]="picker" [min]="minDate" formControlName="startDate" readonly />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在您的 ts 文件中：

添加minDate: Date;

constructor(){
this.minDate = new Date();
}