角材料io MatDatePicker

我有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）在MatDatepickerInput.registerDatepicker（datepicker.es5.js：1560）

感謝您的解決方案或反饋

Joost的

來源

2017-10-14 user1593409

耶，我只是犯了這個錯誤。 'picker'在兩者之間必須是唯一的，只要它們是唯一的，請嘗試'[matDatepicker] =「picker1」'和'[matDatepicker] =「picker2」'或類似的。 '[for]'綁定也需要匹配新的id。 – stealththeninja

的實例變量名稱需要對每個實例都是唯一的。在這個例子中，我使用了picker1和picker2，但隨意使用更好的名字。 Here's a sample from the 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>

來源

2017-10-14 06:58:36 stealththeninja

角材料io MatDatePicker

回答

相關問題