React-Admin中DateInput组件时区问题解析与解决方案

在React-Admin项目开发中，DateInput组件在处理日期时出现了一个有趣的时区相关问题。当用户在特定时区修改日期值时，组件会自动将日期减少一天，这个问题在GMT-3（如圣保罗）和GMT-4（如纽约）等时区尤为明显。

问题现象

DateInput组件在以下场景会出现异常行为：

1. 组件设置了默认值（如当天日期）
2. 用户修改日期值
3. 触发表单验证时，日期值会自动减1天

这个问题不会出现在GMT+0时区（如伦敦），但在美洲时区（如洛杉矶、圣保罗）可以稳定复现。这表明问题与时区处理逻辑密切相关。

问题根源

经过深入分析，发现问题出在日期转换逻辑上。React-Admin内部使用convertDateToString函数将Date对象转换为字符串格式时，没有正确处理时区偏移量。当用户处于西时区时，本地时间比UTC时间晚，导致转换后的日期比预期少一天。

解决方案

核心修复方案是修改convertDateToString函数，在转换前先将日期调整为UTC时间。具体实现如下：

const convertDateToString = (value: Date) => {
    if (!(value instanceof Date) || isNaN(value.getDate())) return '';
    let UTCDate = new Date(value.getTime() + value.getTimezoneOffset() * 60000);
    const pad = '00';
    const yyyy = UTCDate.getFullYear().toString();
    const MM = (UTCDate.getMonth() + 1).toString();
    const dd = UTCDate.getDate().toString();
    return `${yyyy}-${(pad + MM).slice(-2)}-${(pad + dd).slice(-2)}`;
};

这个修改通过以下方式解决问题：

1. 计算当前时区与UTC的偏移量（分钟）
2. 将偏移量转换为毫秒并加到原始时间上
3. 使用调整后的UTC时间进行格式化

临时解决方案

在官方修复发布前，开发者可以采用以下临时方案：

1. 在项目中使用自定义的DateInput组件，重写日期转换逻辑
2. 在表单提交前手动调整日期值
3. 设置应用时区为UTC（不推荐，可能影响其他功能）

最佳实践建议

处理日期输入时，建议开发者：

1. 明确指定应用使用的时区
2. 在服务器和客户端之间传输日期时使用ISO格式
3. 在前端显示日期时进行本地化转换
4. 编写覆盖不同时区的单元测试

这个问题的修复将包含在React-Admin的未来版本中，为全球开发者提供更稳定的日期处理体验。