Angular 8：如何使用 [min] 日期验证将 formcontrol 值修补到 mat-datepicker 并且 formcontrol 日期值小于 [min] 日期？答案

【问题标题】：Angular 8: How to patch formcontrol values to mat-datepicker with [min] date validation and formcontrol date value is less then the [min] Date?Angular 8：如何使用 [min] 日期验证将 formcontrol 值修补到 mat-datepicker 并且 formcontrol 日期值小于 [min] 日期？
【发布时间】：2020-09-14 08:30:07
【问题描述】：

如何使用 [min] 日期验证将 formcontrol 值修补到 mat-datepicker 并且 formcontrol 日期小于 [min] 日期？

这里是html。

<label class="label input-form-label">Date:</label>
<span class="input-group-addon" (click)="picker.open();">
  <input [matDatepicker]="picker" [min]="today" type="text" class="input-form" formControlName="date">
  <div class="datepicker-icon-div" style="right: 30px;">
    <i class="fa fa-calendar"></i>
  </div>
</span>
<span>
  <mat-datepicker #picker></mat-datepicker>
</span>

这里是reactive form。

today = new Date(); // suppose todays date is 27-05-2020 
pastDate = new Date(2020, 05, 24);

this.form = this.fb.group({
  date: [this.today, Validators.required]
})

patchFormValue(){
  this.form.patchValue({
    date: this.pastDate
  })
}

我想禁用 matdatepicker 的过去日期，所以我添加了 [min] 验证。但我也想修补过去的日期。有没有其他方法可以禁用日期或修补过去的日期？

【问题讨论】：

标签： angular date angular-reactive-forms mat-datepicker

【解决方案1】：

我不确定你是否仍然需要这个，但我今天遇到了类似的情况，我们有来自比今天日期更早的数据库的值，但我们不允许他们从选择器中选择日期那是较早的日期。

我最终做了一些对我有用的事情，虽然它并不漂亮。

首先，我在日期选择器中添加了 [dateClass]="dateClass()" 和 [startAt]="today" 并去掉了 [min] 验证。

<label class="label input-form-label">Date:</label>
<span class="input-group-addon" (click)="picker.open();">
  <input [matDatepicker]="picker" type="text" class="input-form" formControlName="date">
  <div class="datepicker-icon-div" style="right: 30px;">
    <i class="fa fa-calendar"></i>
  </div>
</span>
<span>
  <mat-datepicker [startAt]="today" [dateClass]="dateClass()" #picker></mat-datepicker>
</span>

然后我将该方法添加到 component.ts 中，以便它将新的 css 样式添加到今天日期之前的所有值。

dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
        return  date.setHours(0, 0, 0, 0) < this.today.setHours(0, 0, 0, 0) ? 'disable-dates' : undefined;
    }
}

然后我将那个 css 类添加到我的组件中，这样它就可以从日期选择器中模拟 mat disabled 日期的样式

::ng-deep.disable-dates {
  pointer-events: none;
}

::ng-deep.disable-dates > .mat-calendar-body-cell-content {
  color: rgba(0, 0, 0, 0.38);
}

这样它会禁用日期选择器中的日期，但不会导致在选择器附加到的输入字段上发生验证。

https://stackblitz.com/edit/angular-ivy-atw9cz

【讨论】：

【解决方案2】：

在 Js 月份的索引为零，因此 May == 4

参考

https://stackblitz.com/edit/angular-ivy-aeasyj

【讨论】：