Change Header Dateformat in Angular Material Datepicker

Question

In the picture below you can see my datepicker. It works nicely and is defined as

<mat-datepicker [disabled]="formCtrl?.disabled" #dp startView="multi-year" (closed)="closed()"> </mat-datepicker>

So first I can see the year, then the month and then as in the image the day picker. Well at the day picker the date format to jump back to the monthpicker is kinda odd (the 2030-06-05T00:00:00+08:00). Is there a way to change it?

Answer 1

To change the format you can use multiple display formats. Try below example:

import { Component } from "@angular/core";
import { VERSION } from "@angular/material";
import {
  MatDialog,
  MAT_DIALOG_DATA,
  MAT_DATE_FORMATS
} from "@angular/material";

export const DateFormat = {
  display: {
    dateInput: "MM/DD/YYYY",
    monthYearLabel: "MMMM YYYY",
    dateA11yLabel: "MM/DD/YYYY",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@Component({
  selector: "material-app",
  templateUrl: "app.component.html",
  providers: [{ provide: MAT_DATE_FORMATS, useValue: DateFormat }]
})
export class AppComponent {
  version = VERSION;
  date = new Date();
}