我想更改Angular Material日期选择器月份标签显示。默认情况下，月视图为MMM格式。 我想使用自定义MatDateFormats更改为MMMM。
export const APP_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: 'MMMM'
},display: {
dateInput: 'MMMM',monthYearLabel: 'MMMM',dateA11yLabel: 'MMMM',monthYearA11yLabel: 'MMMM'
}
};
在该示例中，我尝试在各处设置MMMM，但是月份名称不会更改格式。
对于我的自定义日期格式，我首先像在模块中一样定义格式：
export const MY_FORMATS = {
parse: {
dateInput: "LL",},display: {
dateInput: "LL",monthYearLabel: "MMM YYYY",dateA11yLabel: "LL",monthYearA11yLabel: "MMMM YYYY",};
，然后对模块的提供程序执行以下操作：
providers: [
{ provide: MAT_DATE_FORMATS,useValue: MY_FORMATS },]
您可以使用MomentDateAdapter：
这里是一个例子：
import { Component,OnInit,Output,EventEmitter } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter,MAT_DATE_FORMATS,MAT_DATE_LOCALE } from '@angular/material';
import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
parse: {
dateInput: 'MM/YYYY',display: {
dateInput: 'MM/YYYY',monthYearLabel: 'MMM YYYY',dateA11yLabel: 'LL',monthYearA11yLabel: 'MMMM YYYY',};
@Component({
selector: 'app-datepicker1',templateUrl: './datepicker1.component.html',styleUrls: ['./datepicker1.component.css'],providers: [
{ provide: DateAdapter,useClass: MomentDateAdapter,deps: [MAT_DATE_LOCALE] },{ provide: MAT_DATE_FORMATS,],})
export class Datepicker1Component implements OnInit {
@Output() date1: EventEmitter<any> = new EventEmitter<any>();
date = new FormControl(moment());
constructor() { }
ngOnInit() {
}
change(dateEvent) {
this.date1.emit(dateEvent.value)
}
}
请参见here