角材料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

回答

相关问题