响应式表单mat-datepicker使用luxon格式化ISO日期问题

mat-datepicker 选中日期后默认向表单控件写入原生Date类型值，和初始加载时的ISO字符串格式不一致。你直接对原生Date对象调用DateTime.fromISO()属于参数类型不匹配，Luxon无法按ISO解析规则识别输入值，最终格式化结果异常。
另外你代码里的plus({ day: 1 })存在参数错误，Luxon的时长单位要求用复数形式，正确写法是plus({ days: 1 })，单数参数会导致日期偏移逻辑不生效。

• 兼容两种输入格式：取值时先判断表单返回值的类型，分别走对应的解析逻辑，不要固定只用fromISO解析。
• （可选）一劳永逸方案：给mat-datepicker配置Luxon日期适配器，从根源上让组件统一输出Luxon DateTime对象，避免后续每次取值都做类型判断。

临时兼容写法（不需要改模块配置） #

// 统一解析表单日期值，同时兼容初始ISO字符串、选中后原生Date两种输入
const parseFormDate = () => {
  const rawValue = this.form?.get('date')?.value;
  return rawValue instanceof Date 
    ? DateTime.fromJSDate(rawValue) 
    : DateTime.fromISO(rawValue);
};

// 输出标准ISO日期（仅年月日，格式如2022-05-10）
const currentISODate = parseFormDate().toISODate();
// 日期+1天后的ISO日期
const nextDayISODate = parseFormDate().plus({ days: 1 }).toISODate();
// 如果需要和初始值完全一致的带时区偏移的完整ISO时间格式，调用toISO()即可
const fullISODatetime = parseFormDate().toISO();

全局适配Luxon适配器写法 #

1. 先安装对应依赖：
   npm install @angular/material-luxon-adapter luxon
2. 在对应的业务模块中引入适配器配置：

import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';

@NgModule({
  // 其余模块配置保持不变
  providers: [
    // 其余服务保持不变
    provideLuxonDateAdapter()
  ]
})
export class YourFeatureModule {}

配置完成后，mat-datepicker选中后返回的就是Luxon DateTime实例，可直接调用.toISODate()、.toISO()等方法格式化，不需要再额外做类型判断。

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