Angular Material日期选择器MM/YYYY格式显示问题求助

1. 正确配置自定义日期格式 #

首先确保你的MAT_DATE_FORMATS配置覆盖了解析和显示的格式，并且在模块中正确注入：

// 在你的模块文件（如app.module.ts）中
import { MAT_DATE_FORMATS } from '@angular/material/core';

// 定义自定义格式
export const MY_MONTH_YEAR_FORMATS: MAT_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY', // 解析用户输入的格式
  },
  display: {
    dateInput: 'MM/YYYY', // 输入框显示的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

// 在@NgModule的providers数组中添加
providers: [
  { provide: MAT_DATE_FORMATS, useValue: MY_MONTH_YEAR_FORMATS }
]

同时要确保导入了必要的Material模块：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core'; // 原生日期适配器，或用MomentDateModule

@NgModule({
  imports: [
    // ...其他模块
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})

2. 设置日期选择器为年月选择模式并自动关闭弹窗 #

修改模板，将日期选择器的初始视图设为multi-year（直接显示年份选择），并监听年份和月份选择事件，选完月份后关闭弹窗：

<mat-form-field appearance="fill">
  <input 
    matInput 
    [matDatepicker]="monthPicker" 
    placeholder="选择年月" 
    [formControl]="monthYearControl"
  >
  <mat-datepicker-toggle matSuffix [for]="monthPicker"></mat-datepicker-toggle>
  <mat-datepicker 
    #monthPicker 
    startView="multi-year" 
    (yearSelected)="onYearSelected($event, monthPicker)"
    (monthSelected)="onMonthSelected($event, monthPicker)"
  ></mat-datepicker>
</mat-form-field>

在组件类中实现事件处理逻辑：

import { FormControl } from '@angular/forms';
import { MatDatepicker } from '@angular/material/datepicker';

// 定义表单控件
monthYearControl = new FormControl(new Date());

// 选择年份后切换到月份选择视图
onYearSelected(selectedYear: Date, picker: MatDatepicker<Date>) {
  const currentDate = this.monthYearControl.value || new Date();
  currentDate.setFullYear(selectedYear.getFullYear());
  this.monthYearControl.setValue(currentDate);
  picker.open(); // 保持弹窗打开，切换到月份选择
}

// 选择月份后关闭弹窗
onMonthSelected(selectedMonth: Date, picker: MatDatepicker<Date>) {
  const currentDate = this.monthYearControl.value || new Date();
  currentDate.setMonth(selectedMonth.getMonth());
  this.monthYearControl.setValue(currentDate);
  picker.close(); // 关闭弹窗
}

3. 常见问题排查 #

• 如果格式仍不生效：检查是否导入了正确的日期适配器（原生MatNativeDateModule或Moment的MomentDateModule），若使用Moment需额外配置MomentDateAdapter的格式。
• 确保表单控件的初始值是有效的Date对象，避免null或undefined导致显示异常。
• 若使用Angular版本低于15，注意monthSelected和yearSelected事件的参数格式可能略有不同，需调整处理逻辑。

内容的提问来源于stack exchange，提问作者Ivo