angular - Angular Material 7 中的多个日期选择

Question

场景:需要在 Angular Material 的日期选择器中选择多个日期。

目前DatePicker Examples中的官方文档中没有这种场景。

问题:如何使用 Material Design 实现多日期选择？

我想修改 Angular Material 的现有实现，但不知道从哪里开始。

任何线索都会非常有帮助。

Answer 1

您必须分别命名日期选择器，例如 picker1 和 picker2，如下所示。

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Start date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="End date">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

像这样你可以在单个页面中选择多个日期。