禁用日期的 HTML5 日期选择器在 Angular 中不起作用

【问题标题】：HTML5 Datepicker with disabled dates not working in Angular禁用日期的 HTML5 日期选择器在 Angular 中不起作用
【发布时间】：2018-08-22 00:18:29
【问题描述】：

我想在日期选择器 (HTML5) 中禁用过去的日期。当我在没有任何条件的情况下（自发地）使用日期选择器时，禁用的日期正在工作。

如果我在有条件的情况下使用日期选择器，它将不起作用。我使用 jQuery 将今天的日期附加到日期元素的“min”属性（使用 jQuery 和 Angular 是不好的做法）。因为我找不到如何使用表单控件打字稿访问/附加日期元素的属性。（例如：formname.get('formcontrolName')....）

我希望日期选择器可以在条件下工作。

Source code

【问题讨论】：

标签： angular typescript datepicker angular-reactive-forms

【解决方案1】：

您可以将 datepicker 的 min 属性绑定到组件的属性。这是工作示例的相关部分（请注意，必须将值分配给构造函数中的给定属性，因为 ngAfterViewInit 生命周期挂钩被调用到较晚）：

HTML

<input type="date" class="form-control" [min]="today" id="applyDate1" formControlName="applyDate1"/>

打字稿

export class AppComponent implements AfterViewInit {

  public personalForm: FormGroup;
  public today;

  constructor(private fb: FormBuilder) {
    const currentDate:Date = new Date();
    let dd:any = currentDate.getDate();
    let mm:any = currentDate.getMonth()+1;
    let yyyy:any = currentDate.getFullYear();

    if(dd<10) {
        dd = '0'+dd
    } 

    if(mm<10) {
        mm = '0'+mm
    } 

    this.today = yyyy + '-' + mm + '-' + dd;

    ...
  }

 ...

}

【讨论】：

让 dd:number 应改为 dd:any（不能与字符串连接），与 mm 和 yyyy 相同。