时间戳

首页 > 解决方案 > Angular Material Datepicker：如何过滤以便只允许数组中的日期？

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

问题描述

我有一个从 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数组中的每个值？

标签： angulardatepickerangular-material

解决方案

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

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

查看Stackblitz 演示

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

推荐阅读