Angular Material Datepicker：如何过滤以便只允许数组中的日期？

Posted 2023-05-07

【中文标题】Angular Material Datepicker：如何过滤以便只允许数组中的日期？

【英文标题】：Angular Material Datepicker: How to filter so that only dates in an array are allowed?

【发布时间】：2020-02-03 06:06:26

【问题描述】：

我有一个从 API 返回的日期数组。例如，我可能有一个名为 validDates 的数组，其中包含 9 月的所有星期一作为它们的值。我想使用 Material Datepicker 过滤器只允许选择数组中的日期值。

示例日期数组

validDates = [
    Mon Sep 02 2019 00:00:00 GMT-0500 (Central Daylight Time),
    Mon Sep 09 2019 00:00:00 GMT-0500 (Central Daylight Time),
    Mon Sep 16 2019 00:00:00 GMT-0500 (Central Daylight Time),
    Mon Sep 23 2019 00:00:00 GMT-0500 (Central Daylight Time),
    Mon Sep 30 2019 00:00:00 GMT-0500 (Central Daylight Time)
]

日期选择器过滤器（不工作）

myFilter = ( d: Date ): boolean => 
    let dateOpen: boolean;
    for ( let x = 0; x < this.validDates.length; x++ ) 
      dateOpen = d.toString() === this.validDates[ x ].toString();
    
    return dateOpen;
  

问题在于它仅将最后一个日期（2019 年 9 月 30 日星期一 00:00:00 GMT-0500（中部夏令时间））返回为 true，因此只有 30 日成为可选的。我希望数组中的每个日期都是可选的。

如何为数组中的每个值返回true？

【问题讨论】：

myFilter 在哪里使用？

组件html视图中使用了myFilter

【参考方案1】：

为了只允许数组中的日期，myFilter 方法可以定义如下。

myFilter = (d: Date): boolean => 
  // Only allow dates in `validDates`.
  return this.validDates.findIndex( (valid_date) => d.getTime() === valid_date.getTime()) > -1

见Stackblitz Demo

要忽略Date 的时间部分，请参阅：Comparing date part only without comparing time in JavaScript

【讨论】：

工作完美，反应优雅。谢谢！

【参考方案2】：

终于找到了正确的解决方案：

// The array of days of week to be available
const arr = [0, 3, 6];
this.expressSenderDate = (d: Date): boolean => 
    const day = d.getDay();
    // tslint:disable-next-line:align
    return arr.indexOf(day) !== -1;
;