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.

The behavior is the same on the Angular Material docs as well: material.angular.io/components/datepicker/examples — rycirese
– rycirese, Commented Dec 4, 2018 at 15:56

Jay · Accepted Answer · 2019-01-17 06:02:21Z

2

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>

answered Jan 17, 2019 at 6:02

Jay

1358 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material MatDatePicker not displaying correct date

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related