angularangular-materialdatepickermat-datepicker

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

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