Angular Materialで複数のDatepickerを使用するにはどうすればよいですか？

Question

linkを経由してmake a datepicker on the webpageに行きます。 1つの日付ピッカーのためではなくmy application I want multiple Datepickersに

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

上記のコードワークウェル：私は言及リンクから、次のコードをコピーしています。

ページに複数の日付ピッカーを表示するために上記のコードを2回複製しようとしましたが、日付を選択する機能がなくてもプレースホルダを取得できました。

ウェブページ上に複数の日付選択ツールを表示するには、上記のコードを変更する必要があります。

Answer 1

あなたは= "picker1" [matDatepicker]彼らのためにdiffernetの名前を使用する必要があり、これ

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

2つ目

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