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

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

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

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

datepicker


angular-material mat-datepicker
person Safari    schedule 05.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы изменить формат, вы можете использовать несколько 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();
}
person Tushar    schedule 05.03.2020