0

如何使用 [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] 验证。但我也想修补过去的日期。有没有其他方法可以禁用日期或修补过去的日期？

4

2 回答 2

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

于 2021-03-16T21:57:42.473 回答
0

在 Js Month 中索引为零，因此 May == 4

参考

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

于 2020-05-27T10:54:34.913 回答