Soy nuevo en Angular/Angular Material.

Tengo un div con 2 MatDatePicker campos de entrada:

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

Pero me sale el siguiente error en el navegador:

MatDatepicker sólo puede estar asociado con una sola entrada. en
MatDatepicker._registerInput (selector de fecha.es5.js:1281)
en MatDatepickerInput.registerDatepicker (selector de fecha.es5.js:1560)

Gracias por tus soluciones o comentarios

Joost

  • Yay, acabo de hacer este error. picker debe ser único entre los dos, trate de [matDatepicker]="picker1" y [matDatepicker]="picker2" o similares, siempre que sean únicos. El [for] de unión también se necesita para que coincida con el nuevo id.
InformationsquelleAutor user1593409 | 2017-10-14

1 Comentario

  1. 14

    La variable de instancia nombre debe ser único para cada instancia. En el ejemplo, he usado picker1 y picker2 pero siéntase libre de utilizar mejor los nombres. Aquí una muestra del 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>
    

Dejar respuesta

Please enter your comment!
Please enter your name here