Datepicker Material Angular：如何顯示月份的全名？

Question

我在我的 Angular 應用程序中使用了 Datepicker 組件（材料）。 特別是我使用月視圖組件（這是Stackblitz中的一個示例）。 如何顯示月份的全名？ 我想要這樣的結果：一月、二月等。有人可以幫助我嗎？

Answer 1

你可以導入

import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

在你的 NgModule 中，像這樣聲明你的自定義格式：

const MY_FORMATS  = {
    parse: { dateInput: 'DD/MM/YYYY' },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMMM YYYY',
        dateA11yLabel: 'DD/MM/YYYY',
        monthYearA11yLabel: 'MM YYYY',
    }
}

然后在模塊的導入部分提供它們，如下所示：

  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ]

這將在日期選擇器的左上角顯示完整的月份。

我更新了您在此處提供的 plunkr 示例

不幸的是，無法進一步自定義日期選擇器中顯示的日期。 正如您在此處看到的， MatDateFormats類型僅允許自定義這 4 個顯示屬性。

Answer 2

請檢查此內容mat-datepicker-date-format

您在尋找這種日期格式的東西嗎？ 如果沒有，請告訴我您需要更改的確切位置。

Answer 3

您可以使用時刻日期格式來做到這一點

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

完整示例

https://stackblitz.com/angular/jejdvdkrbgl?file=src%2Fapp%2Fdatepicker-formats-example.ts

Answer 4

更改 ts 文件如下

import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

export const MY_FORMATS = {
  display: {
    dateInput: 'LL'
  },
};

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerStartViewExample {
  startDate = new Date(2020, 0, 1);
}