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

【问题标题】：How to disable Values before Today in Mat-Date Picker如何在 Mat-Date Picker 中禁用今天之前的值
【发布时间】：2020-07-10 11:20:46
【问题描述】：

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

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

例如：截至 2020 年 3 月 30 日，之前的所有日期都应禁用。一个儿子 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])
});

【问题讨论】：

标签： javascript angular typescript angular-material material-design

【解决方案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();
}

【讨论】：