如何在Angular Material 2中使用Jalali日历？mat-datepicker配置异常求助

我之前帮不少开发者踩过Angular Material日期选择器适配Jalali（波斯历）的坑，你遇到的月份与日期排列异常，核心原因是只设置了LOCAL_ID为fa-IR，但没有配置专门的Jalali日期适配器和格式化规则。下面是完整的正确配置流程：

1. 安装必要依赖 #

首先需要安装moment-jalaali（处理Jalali日期的moment扩展）和Angular Material的moment适配器：

npm install moment-jalaali @angular/material-moment-adapter

2. 配置Jalali日期模块 #

创建一个专门的日期模块（比如jalali-date.module.ts），或者直接在根模块中配置自定义适配器和日期格式：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as moment from 'moment-jalaali';

// 定义Jalali日历的显示/解析格式
const JALALI_DATE_FORMATS = {
  parse: {
    dateInput: 'jYYYY/jMM/jDD', // 输入框解析格式
  },
  display: {
    dateInput: 'jYYYY/jMM/jDD', // 输入框显示格式
    monthYearLabel: 'jYYYY jMMMM', // 年月选择器显示格式
    dateA11yLabel: 'jYYYY/jMM/jDD',
    monthYearA11yLabel: 'jYYYY jMMMM',
  },
};

// 自定义Jalali日期适配器，适配moment-jalaali的规则
export class JalaliMomentDateAdapter extends MatMomentDateAdapter {
  override createDate(year: number, month: number, date: number): moment.Moment {
    // 注意：Jalali月份是1基索引，而moment内部是0基，所以这里要做转换
    return moment(`${year}/${month + 1}/${date}`, 'jYYYY/jMM/jDD');
  }

  override parse(value: any, parseFormat: string | string[]): moment.Moment | null {
    if (typeof value === 'string' && value.length > 0) {
      return moment(value, parseFormat, 'fa-IR');
    }
    return super.parse(value, parseFormat);
  }
}

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'fa-IR' },
    {
      provide: DateAdapter,
      useClass: JalaliMomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: MAT_DATE_FORMATS, useValue: JALALI_DATE_FORMATS },
  ],
})
export class JalaliDateModule { }

3. 在应用中使用配置好的模块 #

在需要使用日期选择器的组件模块中导入JalaliDateModule，然后在模板中正常使用mat-datepicker：

<mat-form-field appearance="fill">
  <mat-label>انتخاب تاریخ</mat-label>
  <input matInput [matDatepicker]="jalaliPicker">
  <mat-datepicker-toggle matIconSuffix [for]="jalaliPicker"></mat-datepicker-toggle>
  <mat-datepicker #jalaliPicker></mat-datepicker>
</mat-form-field>

4. 初始化Locale（关键步骤） #

在main.ts中添加Locale初始化代码，确保moment-jalaali使用波斯语环境：

import * as moment from 'moment-jalaali';

// 初始化Jalali locale
moment.locale('fa-IR');

常见问题排查 #

• 如果仍然出现日期/月份排列异常：检查JALALI_DATE_FORMATS中的格式是否正确，确保使用jYYYY（Jalali年）、jMM（Jalali月）、jDD（Jalali日）的前缀。
• 版本兼容问题：确保moment-jalaali和你的Angular、Angular Material版本匹配，建议使用最新稳定版。
• 样式异常：如果日期选择器的UI排版错乱，可以检查是否正确导入了Angular Material的波斯语样式，或者手动调整日历的CSS布局。

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