Angular 7 Mat datepicker - 如何将月份名称从短更改为长：答案

【问题标题】：Angular 7 Mat datepicker - How to change the name of the month from short to long:Angular 7 Mat datepicker - 如何将月份名称从短更改为长：
【发布时间】：2020-08-26 21:39:56
【问题描述】：

我需要帮助，尝试了很多方法但没有帮助。我使用 Angular 7 Mat datepicker，真的很想知道如何将月份的名称从短改为长：

提前感谢您的帮助。

【问题讨论】：

标签： angular datepicker

【解决方案1】：

据我所知，您可以使用日期选择器组件配置的唯一格式是：https://material.angular.io/components/datepicker/overview#accessibility

@NgModule({
  imports: [MatDatepickerModule, MomentDateModule],
  providers: [
    {
      provide: MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: ['l', 'LL'],
        },
        display: {
          dateInput: 'L',
          monthYearLabel: 'MMM YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      },
    },
  ],
})
export class MyApp {}

参考：MAT_DATE_FORMATS definition/meaning of fields

如果您想知道这些来自哪里或语法是如何完成的，请查看此链接：https://momentjs.com/docs/#/displaying/format/

如果你仍然想尝试改变它，你可以尝试覆盖moment.js中的monthShort，这是使用这个组件工作的库：

moment.updateLocale('en', {
    months : [
        "January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December"
    ]
});

考虑到您在上面看到的这个标签适用于语言环境

  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super();
    this.setLocale(dateLocale || moment.locale());
  }

  setLocale(locale: string) {
    super.setLocale(locale);

    let momentLocaleData = moment.localeData(locale);
    this._localeData = {
      firstDayOfWeek: momentLocaleData.firstDayOfWeek(),
      longMonths: momentLocaleData.months(),
      shortMonths: momentLocaleData.monthsShort(),
      dates: range(31, (i) => this.createDate(2017, 0, i + 1).format('D')),
      longDaysOfWeek: momentLocaleData.weekdays(),
      shortDaysOfWeek: momentLocaleData.weekdaysShort(),
      narrowDaysOfWeek: momentLocaleData.weekdaysMin(),
    };
  }

【讨论】：