Attempted to open an MatDatepicker with no associated input

Question

I have defined this MatDatePicker:

 <input #creatoDal matInput [matDatepicker]="creatoDal"
                            (focus)="creatoDal.open()" readonly>
                        <mat-datepicker-toggle matSuffix [for]="creatoDal"></mat-datepicker-toggle>
                        <mat-datepicker #creatoDal></mat-datepicker>

It seems to me that I've bound the reference correctly, but when clicking on the datepicker it doesn't open and it gives me the following error:

Error: Attempted to open an MatDatepicker with no associated input. at MatDatepicker.push../node_modules/@angular/material/esm5/datepicker.es5.js.MatDatepicker.open

Why did you defined two identical template reference `#creatoDal`? — Hsuan Lee, Oct 09 '19 at 10:59

score 5 · Answer 1 · answered Oct 09 '19 at 10:57

you have added hash #creatoDal to two elements removing it from you input should work for you so you code should be

<input  matInput [matDatepicker]="creatoDal"
                            (focus)="creatoDal.open()" readonly>
                        <mat-datepicker-toggle matSuffix [for]="creatoDal"></mat-datepicker-toggle>
                        <mat-datepicker #creatoDal></mat-datepicker>

demo

Attempted to open an MatDatepicker with no associated input

1 Answers1