Angular mat date picker format inside calendar

Issue

I’m using angular material datepicker and I have a problem with the format inside the calendar and can’t find the place where to configure it.

I have this format right now:

enter image description here

where can I change this to a format like : YYYY-MM-DD

Solution

The button (circled) is Month Year label.

Would recommend using MomentDateModule for customizing the date format easily.

Step 1: Install @angular/material-moment-adapter.

npm install @angular/material-moment-adapter

Step 2: Import MatMomentDateModule into AppModule

import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    ...,
    MatMomentDateModule,
  ]
})
export class AppModule {}

Step 3: Provide customized MY_FORMATS into providers section for AppModule or Component. (Below code is for Component)

Step 3.1: Provide the desired format for monthYearLabel and monthYearA11yLabel.

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY-MM-DD',
    dateA11yLabel: 'YYYY-MM-DD',
    monthYearA11yLabel: 'YYYY-MM-DD',
  },
};

@Component({
  ...
  providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }]
})

Sample Solution on StackBlitz


References

MomentDateModule formats

Answered By – Yong Shun

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.