角材料 io MatDatePicker答案

【问题标题】：angular material io MatDatePicker角材料 io MatDatePicker
【发布时间】：2017-10-14 06:42:10
【问题描述】：

我是 Angular/Angular 材质的新手。

我有一个带有 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)

感谢您的解决方案或反馈

约斯特

【问题讨论】：

是的，我刚刚犯了这个错误。 picker 需要在两者之间是唯一的，请尝试 [matDatepicker]="picker1" 和 [matDatepicker]="picker2" 或类似的，只要它们是唯一的。 [for] 绑定也需要匹配新的 id。

标签： angular datepicker angular-material

【解决方案1】：

实例变量名称需要对每个实例都是唯一的。在示例中，我使用了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>

【讨论】：