React-admin 3.19 DateInput非激活时自动格式化为YYYY-MM-DD如何保留时间戳

问题确认 #

你观察到的现象符合React-admin 3.x版本的DateInput默认行为：组件在失焦、提交等非激活状态下，确实会默认调用内置的format函数，将字段值转换为YYYY-MM-DD格式的字符串。

根本原因 #

• parse函数仅在用户输入内容同步到表单状态前触发，负责把输入的日期格式转成你需要的存储格式（也就是你用的秒级时间戳）
• format函数会在组件渲染、失焦、提交校验等所有需要读取字段值的场景触发，默认的format逻辑是将任意日期输入转成YYYY-MM-DD字符串，优先级高于你传入的parse结果，所以会把你已经转好的时间戳再次转成日期字符串，最终带到提交参数里。

修复方案 #

你只需要同时自定义format和parse两个函数，保证双向转换逻辑一致即可，示例代码如下：

import { DateInput } from 'react-admin';

// 把输入的YYYY-MM-DD字符串转为秒级时间戳，存入表单状态
const parseToSecTimestamp = (dateStr) => {
  if (!dateStr) return null;
  return Math.floor(new Date(dateStr).getTime() / 1000);
};

// 把表单中存储的秒级时间戳转为YYYY-MM-DD字符串，供组件渲染展示
const formatFromSecTimestamp = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp * 1000);
  return date.toISOString().split('T')[0];
};

// 组件调用时传入两个函数
<DateInput
  source="你的日期字段名"
  parse={parseToSecTimestamp}
  format={formatFromSecTimestamp}
/>

全局适配方案（可选） #

如果你的项目所有日期字段都需要提交秒级时间戳，可以直接在dataProvider的create、update方法中统一处理日期参数的转换，不需要逐个给DateInput加配置：

// 你项目的dataProvider封装逻辑
const myDataProvider = {
  ...baseDataProvider,
  create: (resource, params) => {
    if (resource === '你的资源名') {
      params.data.你的日期字段名 = Math.floor(new Date(params.data.你的日期字段名).getTime()/1000);
    }
    return baseDataProvider.create(resource, params);
  },
  update: (resource, params) => {
    // 同上做统一转换
    return baseDataProvider.update(resource, params);
  }
}

注意事项 #

• 不要仅配置parse函数不配置format函数，否则默认format逻辑会把时间戳识别为无效日期，导致组件展示异常
• 如果需要使用毫秒级时间戳，去掉上述代码中除以1000、乘以1000的逻辑即可

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