angular-material - 在Angular Material 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();
}