React Calendar在Next.js中选日期自动选中前一天问题求助

API 探路者

2026-7-1

解决React Calendar日期选择偏移（夏令时时段）问题

这个问题核心是时区解析差异导致的：YYYY-MM-DD格式的日期字符串被原生Date对象解析为UTC时区的0点，而你的本地时区是PDT（GMT-7），UTC的0点对应本地前一天的17:00，所以显示为前一天。夏令时切换的10-12月这个偏移问题会持续存在，1月后时区或日期范围脱离夏令时影响，因此恢复正常。

解决方案步骤：

1. 用dayjs统一处理日期转换，替代原生Date

原生new Date('YYYY-MM-DD')的解析逻辑默认把字符串当作UTC时间，导致时区偏移。改用dayjs解析和转换日期，确保时区一致性：

// 原代码
dateState={new Date(tripsData?.startDate)}

// 修改后
dateState={dayjs(tripsData?.startDate).toDate()}

dayjs会将YYYY-MM-DD格式的字符串解析为本地时区的0点，转换后的Date对象就是正确的日期。

2. 调整日期状态更新逻辑

在onChange回调中，用dayjs处理选中的日期，避免时区偏差：

const dateStateFunc = (selectedDate, eventType, actionDependencies) => {
  // 格式化选中的日期为YYYY-MM-DD（本地时区）
  const formattedDate = dayjs(selectedDate).format('YYYY-MM-DD');
  // 用formattedDate更新状态（比如startDate/endDate）
  // 示例：setTripsData(prev => ({ ...prev, startDate: formattedDate }))
};

3. 可选：统一UTC时区处理（业务需要时）

如果应用需要基于UTC时区处理日期，可在初始格式化和解析时都使用UTC：

// 初始日期生成（UTC格式）
startDate: dayjs(new Date()).utc().format('YYYY-MM-DD'),
endDate: dayjs(new Date()).utc().format('YYYY-MM-DD'),

// 组件传入日期时用UTC解析
dateState={dayjs.utc(tripsData?.startDate).toDate()}

注意：这种方式需要确保整个应用的日期处理逻辑统一为UTC，避免混合时区导致混乱。