web-dev-qa-db-ja.com

angular material io MatDatePicker

Angular/Angular Materialは初めてです。

2つのMatDatePicker入力フィールドを持つdivがあります。

<div class="docs-example-viewer-body">
  <mat-form-field>
    <mat-select placeholder="Employee" [(ngModel)]="selectedEmployeeId" name="employee_name" (ngModelChange)="setSelectedEmployee($event)">
      <mat-option *ngFor="let employee of employees" [value]="employee.id">
        {{employee.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a start date" [(ngModel)]="inputStartDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [startAt]="startDate"></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose an end date" [(ngModel)]="inputEndDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [startAt]="endDate"></mat-datepicker>
  </mat-form-field>


  <p *ngIf="selectedEmployeeId"> Selected value: {{selectedEmployeeId}} from {{inputStartDate}} until {{inputEndDate}}</p>
</div>

しかし、ブラウザに次のエラーが表示されます。

MatDatepickerは、単一の入力にのみ関連付けることができます。 MatDatepicker._registerInput（datepicker.es5.js：1281）at MatDatepickerInput.registerDatepicker（datepicker.es5.js：1560）

解決策やフィードバックをありがとう

Joost

angulardatepickerangular-material
7
user1593409

インスタンス変数名は、インスタンスごとに一意である必要があります。この例では、picker1およびpicker2しかし、より適切な名前を自由に使用してください。 Material plunkerのサンプルを示します。

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Choose a start date" [(ngModel)]="inputStartDate">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1 [startAt]="startDate"></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="Choose an end date" [(ngModel)]="inputEndDate">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2 [startAt]="endDate"></mat-datepicker>
</mat-form-field>
17
stealththeninja