Angular 如何在角材质中有多个日期选择器？

我这样做是为了

在网页上做一个日期选择器

。我已从上述链接复制了以下代码：

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

上述代码适用于一个日期选择器，但在我的应用程序中，我需要多个日期选择器

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

---

我想知道为了在网页上有多个日期选择器，我需要在上面的代码中做些什么更改

您必须为它们使用不同的网络名称[matDatepicker]=“picker1”和另一个类似的Picker2

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

@Igor我已经编辑了我的问题。你能看一下吗？@Igor你能投反对票吗？我还有一个简短的问题。我可以在代码中使用任何逻辑，使endDate始终大于startDate吗？我在typescript中使用以下代码来验证表单：

validateForm（）{this.unavailabilityForm=this.formBuilder.group（{'startDate'：['']，'endDate'：['']}）；}

我非常确定我需要对上述代码进行一些更改才能完成，但我不确定需要进行哪些更改。尽管我有3个不同的Id用于

[matDatePicker]