如何从日期数组中禁用 Angular Material Datepicker 日期？

Question

我有一个称为 holidayList 的日期数组，我想使用 Angular Material 的日期选择器禁用它。

    holidayList: Date[] = [];
        this.holidayList: [
                    new Date("1/1/2020"),
                    new Date("1/20/2020"),
                    new Date("2/17/2020"),
                    new Date("5/25/2020"),
                    new Date("7/4/2020"),
                    new Date("9/7/2020"),
                    new Date("10/12/2020"),
                    new Date("11/11/2020"),
                    new Date("11/26/2020"),
                    new Date("12/25/2020")
                ]

阅读 Angular 的 Date validation 文档，我们可以像这样利用 [matDatepickerFilter]="myFilter"：

HTML:

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

打字稿：

import {Component} from '@angular/core';

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})

export class DatepickerFilterExample {
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
}

但是，提供的这个示例本质上是在说 'provide all the days where the day of the week is not 0 or 6'。我对如何实现日期列表并说 'here are the list of dates we should disable'.

有点困惑

Link to Angular Material's example on Stackblitz

我知道关于这个主题有多个问题，但我遇到的所有答案都只解决了禁用一周中的某些日子、几个月（例如禁用奇数月）——本质上是禁用一种类型的日子；在这种情况下，我想禁用硬编码日期，仅此而已。

Answer 1

Jedo 您需要更改函数 myFilter，return 如果有效则为 true（在您的情况下，如果它不在数组 Holiday 中），如果无效则为 false（当日期在您的数组 Holiday 中时）。所以你简单地用

替换函数

  myFilter = (d: Date): boolean => {
    const time=d.getTime()
    return !this.holidayList.find(x=>x.getTime()==time)
  }

注意：为了在数组中查找，我使用 getTime 转换了你的日期数组，如果你将数组直接存储为时间会更有效

    this.holidayList=[new Date("1/1/2020").getTime(),
                      new Date("1/20/2020").getTime(),
                      ...  
                     ]

还有你的函数

 myFilter = (d: Date): boolean => {
    const time=d.getTime()
    return !this.holidayList.find(x=>x==time)
  }

注意2：（这不能避免用户手动输入无效日期，所以你需要制作一个自定义验证器来检查日期是否有效

validateDate()
{
   return (control:FormControl)=>{
       const time=control.value.getTime();
       return this.holidayList.find(x=>x==time)?{error:'we are on holidays'}:null
   }
}

如何从日期数组中禁用 Angular Material Datepicker 日期？

How to disable Angular Material Datepicker dates from an array of dates?

datepicker

disabled-input

angular-material

angular