Material日期选择器：如何为月视图中的每一天设置自定义格式？

我之前也碰到过一模一样的需求，确实Material日期选择器没有直接提供配置项来修改月视图单个日期的显示格式，不过咱们可以通过自定义日期适配器来实现这个效果，具体步骤如下：

步骤1：创建自定义Moment日期适配器 #

我们需要继承MomentDateAdapter，重写它的format方法，针对月视图的日期显示场景，强制返回带前导零的格式：

import { Injectable } from '@angular/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';

@Injectable()
export class CustomMomentDateAdapter extends MomentDateAdapter {
  override format(date: Moment, displayFormat: string): string {
    // 针对月视图的日期显示（默认使用'd'格式），替换为'DD'实现补零
    if (displayFormat === 'd') {
      return date.format('DD');
    }
    // 其他场景保持原有逻辑
    return super.format(date, displayFormat);
  }
}

步骤2：配置依赖注入 #

在你的模块（比如AppModule或者单独的日期选择器模块）中，把默认的DateAdapter替换成我们自定义的适配器，同时保留Moment相关的配置：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule, MAT_DATE_LOCALE } from '@angular/material-moment-adapter';
import { CustomMomentDateAdapter } from './custom-moment-date-adapter';
import { DateAdapter } from '@angular/material/core';

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
    {
      provide: DateAdapter,
      useClass: CustomMomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    }
  ]
})
export class DatePickerModule {}

额外说明 #

• 如果你需要调整其他视图（比如年视图、日视图）的日期格式，只需要在format方法里添加对应的displayFormat判断即可。
• 这种方法不会影响日期选择器的核心功能（比如表单绑定、日期解析逻辑），仅仅修改了UI层面的显示格式，非常安全。

另外提一句，也有人尝试过用CSS结合DOM操作的方式实现，但这种方案不够优雅，还容易因为Material版本更新导致失效，所以更推荐上面的适配器方案。

内容的提问来源于stack exchange，提问作者Matthew B.