MatDatePicker throws an error when trying to edit the date manually

Question

I have a problem everywhere I use the mat date picker in the project:

ERROR TypeError: Cannot read properties of undefined (reading 'dateInput')
    at MatDatepickerInput._onInput (datepicker.js:3145)
    at MatDatepickerInput_input_HostBindingHandler (datepicker.js:3388)
    at executeListenerWithErrorHandling (core.js:15308)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15352)
    at HTMLInputElement.<anonymous> (platform-browser.js:561)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28659)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at ZoneTask.invokeTask [as invoke] (zone.js:487)

If I select the date using date picker it works fine, but when I m trying to edit it manually it generates that error and it happens everywhere in the project. For example, I have:

        <div class="datepicker-wrapper mr-20">
            <input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
            <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                <mat-icon matDatepickerToggleIcon svgIcon="calendar"></mat-icon>
            </mat-datepicker-toggle>
            <mat-datepicker #fromPicker></mat-datepicker>
        </div>

I tried to update the material and moment-adapter versions from 12.2.5 to 12.2.12, but I receive the same error. Also I created a new project and it works fine there.

Does anyone encountered this until now? Thank you in advance!

Answer 1

matInput attribute is missing in the input element.

<input matInput [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />

Try this

Answer 2

I had the same error. I resolved it by checking the provider MAT_DATE_FORMATS. The reason of the js error is related to the wrong dateInput format configuration of MAT_DATE_FORMATS provider. Please, check your module where you provide the MAT_DATE_FORMATS and take into account on the property dateInput:

{
  provide: MAT_DATE_FORMATS,
  useValue: {
    display: {
      dateInput: '<check-the-format-here>',
    }
  }
}