Question

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

Answer 1

您要查找此日期格式的东西吗？否则，请告诉我您需要更改的确切位置。

Answer 2

您可以使用时刻日期格式

// 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 3

您可以导入

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},
  ]

这将在日期选择器的左上角显示整个月份。

我更新了您提供的here

示例

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

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

Datepicker材质角度：如何显示月份的全名？

4 个答案: