Question

方案：需要在日期选择器中选择多个带有角材料的日期。

当前DatePicker Examples的官方文档中没有这种情况

问题：如何在材料设计中实施多日期选择？

我虽然修改了角材料的现有实现方式，但不知道从哪里开始。

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

Answer 1

我认为这个很好用

尝试this

这是demo

Answer 2

最后，这帮助了我： mat-datepicker inside *ngFor。以ngFor并将索引用作日期选择器的参考。如果需要真实索引（而不是日期选择器的viewRef），则该索引也必须保存在另一个变量中：

<div *ngFor="let date of formArray.controls; let datePickerViewRef = index; let i = index" class="refresh-date">
         <input matInput [matDatepicker]="datePickerViewRef" placeholder="Choose a date" readonly [formControl]="date">
         <mat-datepicker-toggle matSuffix [for]="datePickerViewRef"></mat-datepicker-toggle>
         <mat-datepicker #datePickerViewRef></mat-datepicker>
         <button(click)="removeRefreshDate(i)">delete</button>
</div>

Answer 3

您必须像下面的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>

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

Angular材质7中的多个日期选择

3 个答案: