Facing issue 'A MatDatepicker can only be associated with a single input.' Angular 8 Material

Question

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker" class="modifyDate" NoSpecialChar ngModel #dateCtrl="ngModel" name="datepicker" (click)="picker.open()" id="dtDeparture" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateCtrl.errors?.required && dateCtrl.touched">Choose a Date       
</mat-error>

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker1" NoSpecialChar class="modifyDate" [(ngModel)]="inputEndDate" name="dtArrival" (click)="picker1.open()" id="dtArrival" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

As you can see above we have unique ids for both the date inputs viz picker1 and picker. Still the issue comes 'A MatDatepicker can only be associated with a single input.' from nowhere. I need help. I searched on google and also on stackover but no help

Solution 1

Try this replace your code with this and try

<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker1">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

refers to the component that the is wrapping (e.g. the input, textarea, select, etc.)

Solution 2

I was also facing the same error. It will be resolved when you'll keep the name of #picker unique

                    <mat-form-field appearance="outline"
                        class="example-full-width input-small-size d-block">
                        <mat-label>Date 1
                        </mat-label>
                        <input matInput type="text" [matDatepicker]="picker1">
                        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                        <mat-datepicker #picker1></mat-datepicker>

                    </mat-form-field>

                    <mat-form-field appearance="outline"
                        class="example-full-width input-small-size d-block">
                        <mat-label>Date 2
                        </mat-label>
                        <input matInput type="text" [matDatepicker]="picker2">
                        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                        <mat-datepicker #picker2></mat-datepicker>

                    </mat-form-field>

Either you are using same #picker (say #picker1) for two time or You are mismatching #pickername with [for] attribute. For ex.

<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                        <mat-datepicker #picker2></mat-datepicker>

which is wrong it should be consistent for [for]="pickerName" and <mat-datepicker #pickerName></mat-datepicker>

Comments

[Gangadhar Gandi]

I cross checked multiple times, your code seems to be right.