Angular Material日期选择器选中年月不显示问题求助

你遇到的问题核心是Angular Material日期选择器的双向绑定逻辑和自定义字符串格式化冲突：

• matDatepicker组件默认要求绑定Date类型值，但你把[(ngModel)]绑定到了字符串类型的selectedMonthYear。
• 当你在monthSelected事件里把格式化后的字符串赋值给selectedMonthYear后，日期选择器内部会自动将选中的Date对象同步到ngModel，直接覆盖你设置的字符串，导致输入框显示日期选择器默认的日期格式，而非你需要的年月字符串。
• 另外你的formatMonthYear函数缺少闭合大括号，属于语法错误，会导致函数无法正常执行。

方案1：拆分双向绑定，用单向绑定控制显示 #

将ngModel绑定到Date类型变量，用[value]单独控制输入框的显示文本，避免绑定冲突：

模板代码修改：

<mat-form-field>
  <input 
    [ngModel]="selectedMonthYear" 
    (ngModelChange)="updateSelectedDate($event)"
    [value]="formatMonthYear(selectedMonthYear)"
    matInput 
    [matDatepicker]="picker" 
    placeholder="Select month" 
    readonly
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="multi-year" (monthSelected)="closeStartDatePicker($event, picker)"></mat-datepicker>
</mat-form-field>

组件代码修改：

// 改为Date类型（或null，避免初始值问题）
selectedMonthYear: Date | null = null;

closeStartDatePicker(normalizedMonth: Date, dp?: any) {
  this.selectedMonthYear = normalizedMonth;
  dp.close();
}

updateSelectedDate(date: Date | null) {
  this.selectedMonthYear = date;
}

private formatMonthYear(date: Date | null): string {
  if (!date) return '';
  const month = date.toLocaleString('en-us', { month: 'long' });
  const year = date.getFullYear();
  return `${month} ${year}`;
}

方案2：使用自定义日期适配器（全局生效） #

如果项目多处需要这种年月格式的日期选择器，可以自定义DateAdapter和MAT_DATE_FORMATS，让日期选择器默认按年月格式解析和显示：

1. 创建自定义适配器文件（如month-year-date-adapter.ts）

import { NativeDateAdapter } from '@angular/material/core';

export class MonthYearDateAdapter extends NativeDateAdapter {
  override format(date: Date, displayFormat: Object): string {
    const month = date.toLocaleString('en-us', { month: 'long' });
    const year = date.getFullYear();
    return `${month} ${year}`;
  }

  override parse(value: any): Date | null {
    if (typeof value === 'string' && value.includes(' ')) {
      const [month, year] = value.split(' ');
      const monthIndex = new Date(`${month} 1, 2000`).getMonth();
      return new Date(parseInt(year), monthIndex, 1);
    }
    return super.parse(value);
  }
}

2. 配置日期格式常量

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MONTH_YEAR_DATE_FORMATS = {
  parse: {
    dateInput: 'MMMM yyyy',
  },
  display: {
    dateInput: 'MMMM yyyy',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

3. 在组件或模块中注入

import { NgModule } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { MonthYearDateAdapter } from './month-year-date-adapter';
import { MONTH_YEAR_DATE_FORMATS } from './month-year-date-formats';

@NgModule({
  providers: [
    { provide: DateAdapter, useClass: MonthYearDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MONTH_YEAR_DATE_FORMATS },
  ],
})
export class YourModule { }

4. 简化模板代码

此时原模板代码可保留双向绑定，适配器会自动处理格式：

<mat-form-field>
  <input [(ngModel)]="selectedMonthYear" matInput [matDatepicker]="picker" placeholder="Select month" readonly>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="multi-year" (monthSelected)="closeStartDatePicker($event, picker)"></mat-datepicker>
</mat-form-field>

组件中selectedMonthYear改为Date | null类型即可。

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