Angular Material2日期时间选择器切换波斯历（Jalali）异常求助

只配置MAT_DATE_LOCALE为fa-IR是不够的——Angular Material默认的日期适配器是基于公历（Gregorian）的，单纯切换locale只会改变文本翻译，不会切换日历系统，这就是为什么你看到当月第一天显示为12号的原因。要正确启用波斯历，需要结合moment-jalaali和Material的Moment日期适配器来实现。

下面是完整的配置步骤：

1. 安装必要依赖 #

首先安装处理波斯历的moment-jalaali，以及Angular Material对应的moment适配器：

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

2. 配置AppModule #

修改你的AppModule，替换默认的日期适配器为MomentDateAdapter，并指定波斯历的日期格式：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MomentDateAdapter, 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';

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

@NgModule({
  declarations: [
    // 你的组件列表
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
  ],
  providers: [
    // 设置locale为波斯语伊朗
    { provide: MAT_DATE_LOCALE, useValue: 'fa-IR' },
    // 使用MomentDateAdapter处理日期
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    // 应用波斯历格式
    { provide: MAT_DATE_FORMATS, useValue: JALALI_DATE_FORMATS },
    // 配置moment适配器的额外选项
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } },
  ],
  bootstrap: [/* 你的根组件 */]
})
export class AppModule {
  constructor(private dateAdapter: DateAdapter<any>) {
    // 初始化moment-jalaali的波斯语支持
    moment.loadPersian({ dialect: 'persian-modern' });
    // 确保适配器使用正确的locale
    this.dateAdapter.setLocale('fa-IR');
  }
}

3. 组件中使用注意事项 #

在你的组件中，绑定日期选择器的[(value)]或[(ngModel)]时，建议使用moment对象而不是原生Date对象，这样才能保证波斯历的正确转换：

import { Component } from '@angular/core';
import * as moment from 'moment-jalaali';

@Component({
  selector: 'app-date-picker',
  template: `
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  `
})
export class DatePickerComponent {
  selectedDate: moment.Moment = moment(); // 初始化当前波斯历日期
}

这样配置后，日期选择器就会完全切换到波斯历，日期和周的显示也会恢复正常。

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