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

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

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

这是我的代码：

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

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

筛选多个日期范围

The 角度材质日期选择器 https://material.angular.io/components/datepicker/overview提供了matDatepickerFilter属性，可以设置为过滤日期的函数。

See Stackblitz example https://stackblitz.com/edit/angular-so57904882?file=app/datepicker-filter-example.ts

成分

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>

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

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

max- 最大有效日期。

min- 最短有效日期。

See Stackblitz example https://stackblitz.com/angular/volegkdxxka?file=app%2Fdatepicker-min-max-example.ts

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>