CODEWITHSUNDEEP
angular
Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Cant typein DD/MM/YYYY format in Material date picker angular 9

I have a material date picker with below markup

<mat-form-field>
                <mat-label>Start date</mat-label>
                <input #ref  matInput [matDatepicker]="startDate" [(ngModel)]="myChangeRequest.NewStartDate">
                <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
                <mat-datepicker #startDate></mat-datepicker>
              </mat-form-field>

Also I have specified en-GB locale

provide: MAT_DATE_LOCALE, useValue: 'en-GB'

But when I type in 18/06/2020 its saying invalid date. But when I select the same date from calendar it works fine and it shows exactly the same value I type in.

So whats wrong when I type in the same date in DD/MM/YYYY format.

But when I type in 06/18/2020 it works fine and when we leave focus out of the field, it converts what we type in into 18/06/2020

Havent got an idea whats this weird issue

I am working in Angular 9

Upvotes: 0

Views: 488

Answers (1)

Maxian Nicu
Maxian Nicu

Reputation: 2294

You need to define parse formats. For this, declare a constant:

const DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: [
      'DD/MM/YYYY'
    ],
  },
};

And then, override default MAT_DATE_FORMATS with:

  {provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS},

You can see default native configuration on github.com

Upvotes: 1

Related Questions