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