CODEWITHSUNDEEP
angularangular-materialdatepickermat-datepicker
Kerk
Kerk

Reputation: 293

Angular mat-date-picker format inside calendar

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

Upvotes: 0

Views: 1211

Answers (1)

Yong Shun
Yong Shun

Reputation: 51160

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

Upvotes: 1

Related Questions