Изменить формат заголовка даты в Angular Материал Datepicker

Question

На картинке ниже вы можете увидеть мой указатель даты. Он прекрасно работает и определяется как

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

Итак, сначала я вижу год, затем месяц, а затем, как на рисунке, указатель дня. Что ж, при выборе дня формат даты, по которому можно вернуться назад к месяцу, выглядит довольно странно (2030-06-05T00: 00: 00 + 08: 00). Есть ли способ изменить это?

Answer 1

Для изменения формата вы можете использовать несколько display форматов. Попробуйте приведенный ниже пример:

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();
}