如何使用日期选择器在 Angular Material 5.0.0 中选择日期范围？

我正在使用最新的Angular Material 5.0.0-rc0在我的 Angular 5 应用程序中。我正在尝试选择一个日期范围datepicker提供了 Angular 材料，但我找不到任何相关文档。

我所能做的就是选择一个startDate或设置minDate and maxDate。这是 HTML 代码

<mat-form-field>
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

和 TS 代码

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

此代码帮助我在最小和最大日期范围内选择一个日期，但不允许选择其中的一个范围。虽然使用第三方库可能会解决这个问题，但它会有不同的 UI，这将与我当前应用程序的 UI 不同。请帮我解决这个问题。

推荐查看Saturn 材料范围 日期选择器 https://github.com/SaturnTeam/saturn-datepicker。也看看他们的演示页面 https://stackblitz.com/edit/angular-4cfnyl。它是一个完整的 Material UX，内置对您现有的 Material 主题的支持。

你可以安装它npm install saturn-datepicker. See 他们的 Github 页面 https://github.com/SaturnTeam/saturn-datepicker获取完整的集成说明。

标记看起来像这样：

  <mat-form-field>
    <input matInput
        placeholder="Choose a date"
        [satDatepicker]="picker"
        [value]="date">
    <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
    <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
  </mat-form-field>

这是页面上最终的样子：