Mobiscroll日期选择器存入Redux Toolkit时日期少一天问题排查

在React应用中使用Mobiscroll Datepicker进行多日期选择安排课程时，其余功能正常，但提交至Redux Toolkit的日期比选中日期少一天。

相关代码与输出 #

Datepicker组件代码 #

<Datepicker
    controls={['calendar']}
    display="inline"
    selectMultiple={true}
    value={Course.dayOfWeek}
    onChange={handleDayChange}
/>

onChange函数代码 #

const handleDayChange=(e)=>{
    console.log(e.value)
    dispatch(setDayofWeek(e.value))
}

控制台打印的选中日期 #

0: Tue Jul 05 2022 00:00:00 GMT+0500 (Pakistan Standard Time) {}
1: Tue Jul 12 2022 00:00:00 GMT+0500 (Pakistan Standard Time) {}
2: Tue Jul 19 2022 00:00:00 GMT+0500 (Pakistan Standard Time) {}

Redux中存储的日期 #

0(pin):"2022-07-04T19:00:00.000Z"
1(pin):"2022-07-11T19:00:00.000Z"
2(pin):"2022-07-18T19:00:00.000Z"

问题原因 #

这是时区转换导致的：

• 控制台显示的是巴基斯坦时区（GMT+0500）的本地时间，比如2022-07-05 00:00:00 GMT+0500
• 当Date对象被序列化为Redux存储的ISO字符串时，会自动转换为UTC时间。巴基斯坦时区的00:00，对应的UTC时间是前一天的19:00（00:00 - 5小时 = 19:00），所以看起来日期少了一天，但本质是同一个时间点的不同时区表示。

解决办法 #

如果只需要存储日期部分（不需要时间和时区），可以在dispatch前对日期进行处理，将其转换为对应日期的UTC 00:00，或者直接存储YYYY-MM-DD格式的字符串：

方法1：转换为UTC日期的00:00 #

修改handleDayChange函数，将每个选中的日期调整为对应日期的UTC时间00:00：

const handleDayChange=(e)=>{
  const adjustedDates = e.value.map(date => {
    // 基于本地日期创建UTC时间的00:00
    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  });
  dispatch(setDayofWeek(adjustedDates));
}

这样Redux中存储的ISO字符串会是2022-07-05T00:00:00.000Z，对应本地日期的7月5日。

方法2：直接存储日期字符串 #

如果业务只需要日期，不需要完整的Date对象，可以将日期格式化为YYYY-MM-DD字符串存储：

const handleDayChange=(e)=>{
  const dateStrings = e.value.map(date => {
    // 使用toLocaleDateString生成YYYY-MM-DD格式
    return date.toLocaleDateString('en-CA');
  });
  dispatch(setDayofWeek(dateStrings));
}

这种方式完全避免时区问题，Redux中直接存储["2022-07-05", "2022-07-12", "2022-07-19"]。

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