如何在Ng Bootstrap Datepicker中自定义月份为完整名称并移除点号

实现思路 #

Ng Bootstrap 的 Datepicker 组件的日期文本展示全部由NgbDatepickerI18n服务统一控制，要修改月份显示格式，只需要自定义该服务的实现替换默认服务即可。

具体实现步骤 #

• 第一步：创建自定义的日期选择器国际化服务类，继承NgbDatepickerI18n，重写月份获取方法，返回无点号的完整月份名称

import { Injectable } from '@angular/core';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

// 中文月份数组，需要英文的话替换为 ['January','February',...,'December'] 即可
const MONTHS = [
  '一月', '二月', '三月', '四月', '五月', '六月',
  '七月', '八月', '九月', '十月', '十一月', '十二月'
];

@Injectable()
export class CustomDatepickerI18n extends NgbDatepickerI18n {
  // 重写短月份名获取方法（默认选择器头部展示的是短月份名）
  override getMonthShortName(month: number): string {
    return MONTHS[month - 1];
  }

  // 重写完整月份名获取方法
  override getMonthFullName(month: number): string {
    return MONTHS[month - 1];
  }

  // 必须实现的星期标签方法，按需返回对应格式即可
  override getWeekdayLabel(weekday: number): string {
    const WEEKDAYS = ['日', '一', '二', '三', '四', '五', '六'];
    return WEEKDAYS[weekday - 1];
  }

  // 必须实现的无障碍标签方法
  override getDayAriaLabel(date: import('@ng-bootstrap/ng-bootstrap').NgbDateStruct): string {
    return `${date.year}年${this.getMonthFullName(date.month)}${date.day}日`;
  }
}

• 第二步：在使用Datepicker的组件/对应模块的providers数组中注册自定义服务，替换默认服务

import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { CustomDatepickerI18n } from './custom-datepicker-i18n.service';

@NgModule({
  // 其余模块配置省略
  providers: [
    { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }
  ]
})
export class YourModule { }

如果仅需要给单个组件生效，把上述providers配置放到对应@Component的配置项中即可，不会全局影响其他日期选择器。

补充说明 #

如果需要适配多语言场景，可以结合Angular自带的DatePipe或者第三方国际化库，动态返回对应语言的月份名称，不需要写死常量数组。

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