Datepicker Material Angular：如何显示月份的全名？答案

【问题标题】：Datepicker Material Angular: How can i display full name of the month?Datepicker Material Angular：如何显示月份的全名？
【发布时间】：2020-02-26 11:30:59
【问题描述】：

我在 Angular 应用程序中使用 Datepicker 组件（材料）。特别是我使用月视图组件（这是Stackblitz 中的一个示例）。如何显示月份的全名？我想要这样的结果：1 月、2 月等。有人可以帮助我吗？

【问题讨论】：

参考角材料示例here。它展示了如何为 angular datepicker 设置日期、月份、年份格式。
链接错误：无法获取 /api/angular/v1
很抱歉。更新网址here

标签： angular typescript datepicker angular-material

【解决方案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 示例here

很遗憾，无法进一步自定义日期选择器中显示的日期。如您所见，here MatDateFormats 类型只允许自定义这 4 个显示属性。

【讨论】：

【解决方案2】：

请查看此内容mat-datepicker-date-format

您在寻找这种日期格式的东西吗？如果没有，请告诉我您需要更改的确切位置。

【讨论】：

我需要把月份的名字改成月份的全名。示例：我点击日历图标，我想显示月份的全名（“Jan”到“January”）。
抱歉我的困惑问题：D
好的，没问题。我认为现在很清楚，日期选择器弹出覆盖中需要更改月份的全名，而不是日期输入框中。

【解决方案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

【讨论】：

【解决方案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);
}

【讨论】：