如何从角度材料日期选择器中排除日期？

Question

我正在使用 Angular Material，并且我有一个动态的日期数组，我希望从我的日期选择器中排除这些日期。此外，我还试图排除星期六。如何使用 matDatepickerFilter 返回多个日期？ 请记住，我不能单独对数组的每个项目进行硬编码，因为数组是流动的，一段时间后它的值和长度都会发生变化。

这是我的 HTML：

<mat-form-field style="text-align: center;"
[ngClass]="{'hideTitle': submitted && f4.houseNumber.errors?.required && f4.aptNumber.errors?.required}">
    <input matInput 
      [matDatepicker]="picker" 
      placeholder="Desired Delivery Date" 
      [matDatepickerFilter]="myFilter"
      formControlName="deliveryDate" 
      style="font-family: 'Open Sans Condensed', sans-serif; color:white;">
    <mat-datepicker-toggle matSuffix [for]="picker" 
    style="color:gold;outline:none;"></mat-datepicker-toggle>
    <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
</mat-form-field>

这是我的数组：

this.allDupedDates = [
  new Date('2019-04-30T00:00:00+02:00'),
  new Date('2019-04-28T00:00:00+02:00'),
  new Date('2019-05-21T00:00:00+02:00'),
  new Date('2019-05-23T00:00:00+02:00')
]

这是代码：

myFilter = (d: Date): boolean => {
 const time = d.getTime();
 const day = d.getDay();
for (let i = 0; i < this.allDupedDates.length; i++) {
  var date = this.allDupedDates[i].getTime();
  return time !== date
}
return day !== 6;
}

Answer 1

您需要的过滤代码：

myFilter = (d: Date): boolean => {
  const day = d.getDay();
  const blockedDates = this.allDupedDates.map(d => d.valueOf());
  return (!blockedDates.includes(d.valueOf())) && day !== 6;
}

- 使用 valueOf() 方法可以轻松地将日期对象相互比较，该方法返回它们自纪元以来的毫秒数。

需要注意的重要提示：

• 确保您在 dupedDates 中创建的日期对象与执行过滤器的时区相同。这样可以确保时区相同，并且不会出现时区偏移问题。 例如：2019 年 4 月 30 日 00:00:00 更改为 2019 年 4 月 29 日 23:30:00。
• 过滤器函数中的参数 d:Date 将始终提供代表客户端位置时区午夜的日期。例如：如果从印度访问应用程序：d 将包含 2019 年 4 月 29 日 00:00:00 +05:30、2019 年 4 月 30 日 00:00:00 +05:30，依此类推...

StackBlitz 示例：https://stackblitz.com/edit/angular-datepicker-filter-so?file=app%2Fdatepicker-filter-example.ts