角度:如何配置日期选择器以禁用多个日期范围?

Question

我有一个对象(范围(列表，其属性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"/>

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

Answer 1

筛选多个日期范围

角度材料日期选取器提供matDatepickerFilter属性，该属性可以设置为筛选日期的函数。

参见堆栈闪电战示例

Component

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])
}
}

Template

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

Date Range between min-max-min and max

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

max- 最长有效日期。

min- 最短有效日期。

参见堆栈闪电战示例

Template

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