在 Angular Material Datepicker 中更改标题日期格式

【问题标题】：Change Header Dateformat in Angular Material Datepicker在 Angular Material Datepicker 中更改标题日期格式
【发布时间】：2020-03-05 08:34:56
【问题描述】：

在下图中你可以看到我的日期选择器。它工作得很好，被定义为

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

所以首先我可以看到年份，然后是月份，然后是图片中的日期选择器。那么在日期选择器中跳回月份选择器的日期格式有点奇怪（2030-06-05T00:00:00+08:00）。有办法改吗？

【问题讨论】：

标签： angular-material mat-datepicker

【解决方案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();
}

【讨论】：