如何通过代码切换Angular Material DatePicker视图实现年月选择

问题分析 #

你设置了startView="year"让日期选择器初始打开年份视图，但选择月份后自动跳转到日期视图，直接修改startView属性无效，是因为startView仅控制初始打开的视图，日期选择器已启动后修改该属性不会触发视图切换，需要手动干预视图跳转逻辑。

修正步骤及代码实现 #

1. 修复HTML语法错误

移除startView="year"周围的多余符号，确保模板语法正确：

<mat-form-field>
  <input matInput [matDatepicker]="TuevFaellig" name="TuevFaellig" [(ngModel)]="object.TuevFaellig">
  <mat-datepicker-toggle matSuffix [for]="TuevFaellig"></mat-datepicker-toggle>
  <mat-datepicker 
    startView="year"
    (yearSelected)="setMonthAndYearForTuevFaellig($event, TuevFaellig)" 
    (monthSelected)="monthSelectedForTuevFaellig($event, TuevFaellig)" 
    #TuevFaellig>
  </mat-datepicker>
</mat-form-field>

2. 修改组件逻辑实现视图切换

在monthSelected事件中，先更新绑定的日期对象的月份，再手动切换到年份选择视图；yearSelected事件中完成年份更新后关闭选择器：

import { Moment } from 'moment';
import { MatDatepicker } from '@angular/material/datepicker';

// ...

monthSelectedForTuevFaellig(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
  // 更新模型中的月份（保留现有年份，无年份则用当前选中月份的年份）
  this.object.TuevFaellig = this.object.TuevFaellig 
    ? this.object.TuevFaellig.clone().month(normalizedMonth.month()) 
    : normalizedMonth.clone();

  // 手动切换到年份选择视图
  datepicker._datepickerPanel._switchView('multi-year');
}

setMonthAndYearForTuevFaellig(normalizedYear: Moment, datepicker: MatDatepicker<Moment>) {
  // 更新模型中的年份
  this.object.TuevFaellig = this.object.TuevFaellig.clone().year(normalizedYear.year());
  datepicker.close();
}

3. 确保依赖配置正确

确认模块中导入了Moment日期适配器（如果使用Moment处理日期）：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule
  ]
})
export class YourFeatureModule { }

核心原理 #

通过调用日期选择器内部的_switchView方法直接切换视图，替代仅修改startView的无效操作，同时在每一步选择后同步更新绑定的日期对象，保证数据一致性。

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