我们如何在 Angular Material 中拥有多个 Datepicker？答案

【问题标题】：How can we have multiple Datepickers in Angular Material?我们如何在 Angular Material 中拥有多个 Datepicker？
【发布时间】：2017-11-20 18:24:52
【问题描述】：

为了make a datepicker on the webpage，我正在浏览这个link。我从提到的链接中复制了以下代码：

   <div class="item item-1" fxFlex="50%" fxFlexOrder="1">
      <mat-form-field>
         <input matInput [matDatepicker]="picker" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
   </div>

上述代码适用于一个日期选择器，但在my application I want multiple Datepickers 中。

我尝试复制上述代码两次，以便在页面上有多个日期选择器，但我只能在此处获取占位符，而无法选择日期。

我想知道我需要在上面的代码中进行哪些更改才能在网页上拥有多个日期选择器。

【问题讨论】：

@Igor 我已经编辑了我的问题。可以看看吗？
@Igor 你能投反对票吗？

标签： angular datepicker angular-material

【解决方案1】：

您必须为它们使用不同的名称 [matDatepicker]="picker1" 和另一个像这样的选择器 2

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
     <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
</div>

第二个

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
      <mat-form-field>
          <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
           <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
           <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
</div>

【讨论】：

我还有一个简单的问题。我可以在代码中使用任何逻辑，以便 endDate 应该始终大于 startDate 吗？我在打字稿中使用以下代码来验证表单：validateForm() { this.unavailabilityForm = this.formBuilder.group({ 'startDate': [''], 'endDate': [''] }); } 我很确定我需要对上面的代码进行一些更改才能完成它，但我不确定我需要进行哪些更改。
即使[matDatePicker] 有 3 个不同的 ID，我也面临同样的问题