Angular Material MatDatePicker not displaying correct date

Question

So I'm using the angular material datepicker in a form to get the user's birth date. It works most of the time but when manually typing in dates in a certain format, it doesn't display the correct date. For example if I type in 2000-01-15 and click away, it changes the date in the input to show 1/14/2000, however if I type in 01/15/2000, it correctly changes the input to display 1/15/2000. Furthermore, if I just type in a year to the input like 2000, it changes the input to display 12/31/1999.

Here's html for the datepicker, not doing any logic on it in the controller.

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

If anyone has any ideas or has ran into this before any help would be greatly appreciated.

Answer 1

Your missing #birthDatein mat-datepicker

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