Datepicker角度材料过滤器验证

Question

有人可以指导我（如果可能）如何防止用户预订某些日期？

我设法避免单击合同的先前日期和结束日期，但不能单击不可用的日期。

我在数据库中存储员工的日期（开始日期，结束日期）。

当用户要与我的一位员工预订会议时，如何阻止用户单击日期？

谢谢！

Answer 1

您可以为此使用[min]和[max]。

Component.html

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Component.ts

minDate = new Date(2000, 0, 1);
maxDate = new Date(2020, 0, 1);

Answer 2

使用 [matDatepickerFilter] =“ myFilter”

DEMO

myFilter = (d: Date): boolean => {

        let date: any;
        let month: any;

        if (d.getDate().toString().length < 2) {
            date = '0' + d.getDate().toString()
        } else {
            date = d.getDate().toString()
        }

        if ((d.getMonth() + 1).toString().length < 2) {
            month = '0' + (d.getMonth() + 1).toString()
        } else {
            month = (d.getMonth() + 1).toString()
        }

        const day = d.getFullYear().toString() + "-" + month + "-" + date;

        return !this.disableDateList.includes(day);
    }

HTML：

<mat-form-field class="col-md-6">
     <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" formControlName="date"
                        placeholder="Choose date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker picker touchUi="true"></mat-datepicker>
  </mat-form-field>