如何在Angular Material日期选择器中禁用年份选择？

嘿，我知道你想把Angular Material日期选择器里的年份选择给禁用掉，你已经开始用自定义NativeDateAdapter来格式化日期显示了，这个方向完全没问题！不过要彻底实现年份不可更改，还需要补充一些配置和逻辑，我给你整理了完整的实现方案：

1. 完善自定义DateAdapter，锁定年份 #

你现有的适配器只是格式化了日期显示，但还没处理年份不可修改的逻辑。我们可以在适配器里强制年份为固定值（比如当前年份，或者你指定的某个年份），这样不管用户怎么操作，年份都不会变：

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

@Injectable()
export class AppDateAdapter extends NativeDateAdapter {
  // 可以自定义固定年份，比如new Date().getFullYear()获取当前年份
  private readonly fixedYear = new Date().getFullYear();
  months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = this.months[date.getMonth()];
      // 强制使用固定年份
      const year = this.fixedYear;
      const formattedDay = day <= 9 ? `0${day}` : day.toString();
      return `${formattedDay}-${month}-${year}`;
    }
    return date.toDateString();
  }

  // 重写parse方法，确保解析后的日期年份也是固定值
  parse(value: any): Date | null {
    if (!value) {
      return null;
    }
    // 这里根据你的日期格式解析，比如"01-Jan-2024"
    const parts = value.split('-');
    if (parts.length !== 3) {
      return super.parse(value);
    }
    const day = parseInt(parts[0], 10);
    const monthIndex = this.months.indexOf(parts[1]);
    if (isNaN(day) || monthIndex === -1) {
      return super.parse(value);
    }
    // 强制设置固定年份
    return new Date(this.fixedYear, monthIndex, day);
  }

  // 重写add方法，禁止修改年份
  add(date: Date, amount: number, unit: 'year' | 'month' | 'date'): Date {
    if (unit === 'year') {
      // 不允许修改年份，直接返回原日期
      return new Date(date.getTime());
    }
    return super.add(date, amount, unit);
  }
}

2. 在模块中配置适配器和日期格式 #

接下来要在你的Angular模块里注册这个自定义适配器，同时配置日期选择器的显示格式：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { AppDateAdapter } from './app-date-adapter';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

// 定义日期格式，和适配器里的format方法对应
export const APP_DATE_FORMATS = {
  parse: {
    dateInput: 'input',
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
  providers: [
    { provide: NativeDateAdapter, useClass: AppDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS },
  ],
})
export class DatepickerModule {}

3. 配置日期选择器的视图模式，隐藏年份选择界面 #

最后在组件模板里，把日期选择器的startView设置为month，这样打开选择器时直接进入月份选择界面，不会显示年份选择的层级：

<mat-form-field appearance="fill">
  <mat-label>选择日期</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <!-- 设置startView为month，直接进入月份视图，隐藏年份选择 -->
  <mat-datepicker #picker startView="month"></mat-datepicker>
</mat-form-field>

这样操作下来，用户不仅看不到年份选择的界面，而且即使通过手动输入或者其他方式尝试修改年份，适配器也会强制把年份改回固定值，彻底实现年份不可更改的效果。

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