如何用DatePicker在angular Material5.0.0中选择日期范围？

Question

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

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

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

Answer 1

建议查看土星材料范围数据更新程序。也看看他们的演示页面。它是一个完整的材料UX，内置支持您现有的材料主题。

您可以使用npm install saturn-datepicker安装它。有关完整的集成说明，请参见他们的Github页面。

标记如下所示：

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