Angular Material Mat日期范围选择器Jalali适配器下setValue失效如何解决

开发者阿泽

2026-10-4

问题核心原因

你自定义的JalaliMomentDateAdapter适配的是jMoment类型的日期对象，而你当前给表单setValue传入的是字符串格式的日期，适配器无法直接识别渲染，所以输入框显示为空。

解决步骤

1. 修改日期转换方法，返回jMoment实例而非字符串

你的convertToMiladi原有逻辑存在冗余错误，直接返回适配器可识别的jMoment对象即可：

import * as jMoment from 'moment-jalaali';

convertToMiladi(date: string): jMoment.Moment {
  // 若输入date为波斯历字符串，使用jMoment的波斯历格式解析
  return jMoment(date, 'jYYYY-jMM-jDD').locale('fa');
  // 若输入date为公历字符串，使用通用格式解析即可
  // return jMoment(date, 'YYYY-MM-DD').locale('fa');
}

2. 直接给表单传入jMoment实例赋值

if (filterModel.fromCreateDate && filterModel.toCreateDate) { 
  // 直接传入转换后的jMoment实例即可
  this.form.patchValue({
    fromDate: this.convertToMiladi(filterModel.fromCreateDate),
    toDate: this.convertToMiladi(filterModel.toCreateDate)
  })
}

3. 确认模块的适配器配置正确

在对应功能模块的providers中必须注册适配器和日期格式：

providers: [
  { provide: DateAdapter, useClass: JalaliMomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: PERSIAN_DATE_FORMATS },
  { provide: MAT_DATE_LOCALE, useValue: 'fa-IR' }
]