Angular：如何配置日期选择器以禁用多个日期范围？

Posted 2023-05-07

【中文标题】Angular：如何配置日期选择器以禁用多个日期范围？

【英文标题】：Angular: How to configure a Date Picker to disable multiple date ranges?

【发布时间】：2020-01-14 05:21:46

【问题描述】：

我有一个具有属性startDate 和endDate 的对象（范围）列表。对于这些范围内的日期，我需要禁用日期选择器上的用户输入。

例如，我想禁用09-01-2019 和09-02-2019 之间的日期以及09-05-2019 和09-06-2019 之间的日期。

我尝试了 [angular-mydatepicker](https://github.com/kekeh/angular-mydatepicker datepicker)，它有一个选项 disableDateRanges，但我不知道如何应用多个日期范围。

这是我的代码：

<input matInput angular-mydatepicker name="startPicker" 
  formControlName="startPicker" (click)="dp.toggleCalendar()"
                 [options]="myStartOptions" #dp="angular-mydatepicker"/>

我该如何解决这个问题，或者是否有其他日期选择器可以处理这个用例？

【参考方案1】：

过滤多个日期范围

Angular Material Datepicker 提供了matDatepickerFilter 属性，可以将其设置为过滤日期的函数。

见Stackblitz example

组件

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 
  dateRange1 = [new Date("09-01-2019"), new Date("09-02-2019")]
  dateRange2 = [new Date("09-05-2019"), new Date("09-06-2019")]

  myFilter = (d: Date): boolean => 
    // Prevent dates in ranges from being selected.
    return !(d >= this.dateRange1[0] && d <= this.dateRange1[1]) 
      && !(d >= this.dateRange2[0] && d <= this.dateRange2[1])
  

模板

<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>

最小值和最大值之间的日期范围

对于指定最小和最大日期范围的更简单场景，请使用数据验证属性：

max - 最大有效日期。

min - 最短有效日期。

见Stackblitz example

模板

<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>

【讨论】：

这可行，但如果我只想禁用一个日期范围。我的问题是如何禁用多个日期范围？！例如，我想禁用从 01-01-2019 到 01-02-2019 的日期，从 01-05-2019 到 01-06-2019 的日期等等..

@Fatih 查看更新的示例，了解如何过滤多个日期范围。

我也尝试使用过滤器，但它需要帮助我。就像我在问题中所说的那样，我有具有属性 startDate 和 endDate 的对象列表。该列表是动态的。该列表中的数据取决于用户选择的内容。所以我不知道我需要禁用哪些日期范围以及有多少个日期范围。它是列表中对象的可变值和列表大小。