eckig material io MatDatePicker

Ich bin neu Eckig/Eckig Material.

Ich habe ein div mit 2 MatDatePicker Eingabefelder:

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

Aber ich bekomme die folgende Fehlermeldung im browser:

MatDatepicker kann nur verbunden sein mit einem einzigen Eingang. bei
MatDatepicker._registerInput (datepicker.es5.js:1281)
bei MatDatepickerInput.registerDatepicker (datepicker.es5.js:1560)

Danke für Eure Lösungen oder feedback

Joost

  • Yay, ich habe gerade diesen Fehler gemacht. picker muss eindeutig zwischen den beiden, versuchen [matDatepicker]="picker1" und [matDatepicker]="picker2" oder ähnlich, so lange, wie Sie sind einzigartig. Die [for] Bindung wird auch brauchen, um mit den neuen id.
InformationsquelleAutor user1593409 | 2017-10-14
  1. 14

    Die Instanz-variable name muss eindeutig für jede Instanz. In dem Beispiel, das ich verwendet habe picker1 und picker2 aber fühlen Sie sich frei zu verwenden, bessere Namen. Hier ist ein Beispiel aus dem 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>
    InformationsquelleAutor stealththeninja
Schreibe einen Kommentar