title: angular material io MatDatePicker
body: <p>I am new to Angular/Angular Material.</p>
  
  <p>I have a div with 2 MatDatePicker input fields:</p>
  
  <pre><code>&lt;div class="docs-example-viewer-body"&gt;
    &lt;mat-form-field&gt;
      &lt;mat-select placeholder="Employee" [(ngModel)]="selectedEmployeeId" name="employee_name" (ngModelChange)="setSelectedEmployee($event)"&gt;
        &lt;mat-option *ngFor="let employee of employees" [value]="employee.id"&gt;
          {{employee.name}}
        &lt;/mat-option&gt;
      &lt;/mat-select&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput [matDatepicker]="picker" placeholder="Choose a start date" [(ngModel)]="inputStartDate"&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #picker [startAt]="startDate"&gt;&lt;/mat-datepicker&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput [matDatepicker]="picker" placeholder="Choose an end date" [(ngModel)]="inputEndDate"&gt;
      &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #picker [startAt]="endDate"&gt;&lt;/mat-datepicker&gt;
    &lt;/mat-form-field&gt;
  
  
    &lt;p *ngIf="selectedEmployeeId"&gt; Selected value: {{selectedEmployeeId}} from {{inputStartDate}} until {{inputEndDate}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I get the following error in the browser: </p>
  
  <blockquote>
    <p>MatDatepicker can only be associated with a single input. at
    MatDatepicker._registerInput (datepicker.es5.js:1281)
        at MatDatepickerInput.registerDatepicker (datepicker.es5.js:1560)</p>
  </blockquote>
  
  <p>Thanks for your solutions or feedback</p>
  
  <p>Joost</p>