如何用Day.js确保跨时区显示一致的行程日期？

问题根源 #

你遇到的日期偏移问题，本质是带时间的UTC字符串在本地时区解析时被转换：创建者选择的1月3日被转成了2025-01-03T05:00:00Z（UTC时间），当身处西五区的用户解析这个字符串时，UTC+0的05:00对应本地前一天的22:00，所以日期显示成了1月2日。

核心思路 #

既然只需要展示日期，不需要时间，就应该完全剥离时间和时区信息：后端存储纯日期字符串（YYYY-MM-DD），前端直接按原始日期解析显示，彻底避免时区转换干扰。

1. 修正前端日期存储逻辑 #

修改convertDate函数，直接提取用户选择的日期部分，存储纯日期字符串：

import utc from "dayjs/plugin/utc";
import dayjs from "dayjs";
dayjs.extend(utc);

export const convertDate = (date: Date | string) => {
  // 直接格式化为纯日期字符串，忽略时间和时区
  return dayjs(date).format('YYYY-MM-DD');
};

修改后，存储到后端的开始日期是"2025-01-03"，结束日期是"2025-01-10"，没有任何时间或时区信息。

2. 修正前端日期显示逻辑 #

从后端拿到纯日期字符串后，指定解析格式，让Day.js直接按原始日期解析，不做时区转换：

// 明确指定解析格式，避免自动时区转换
dayjs(response?.startDate, 'YYYY-MM-DD').format("MMM-DD-YYYY")
dayjs(response?.endDate, 'YYYY-MM-DD').format("MMM-DD-YYYY")

额外处理建议 #

• 如果后端已有旧数据（带UTC时间的ISO字符串），需要做数据迁移：提取每个日期字符串的YYYY-MM-DD部分，替换原有字段值。
• 检查React Calendar的返回值：确保它返回的是用户选择的本地日期对应的Date对象（默认是本地时区0点），用Day.js处理时直接提取日期即可，不需要额外转UTC。

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