React中MUI DateTimePicker时间偏差1小时问题求助

问题根源 #

你遇到的时间偏移问题，是因为moment默认会把带Z标记的UTC时间解析为本地时区时间，之后再输出UTC格式时就会产生偏移（比如你的本地时区是UTC+1，解析后的本地时间比UTC早1小时，转成UTC输出就会晚1小时）。

修复方案 #

方案1：全程以UTC模式处理时间 #

确保moment对象始终基于UTC时区存储和操作：

1. 初始化状态时使用UTC模式
   将初始时间改为moment.utc()创建：

   const [job, setJob] = useState({
       name: "",
       outgoingDateTime: moment.utc("2022-09-01T21:00:00"),
   });
   

2. 修改时间变更函数，强制转为UTC
   在handleOutgoingDateTimeChange中，把新选中的时间转为UTC模式：

   const handleOutgoingDateTimeChange = (newValue) => {
       setJob({...job, outgoingDateTime: newValue.utc()});
   }
   

3. 提交时直接输出UTC格式
   提交时用toISOString()输出标准UTC格式字符串：

   // 获取正确的UTC提交时间
   const submitTime = job.outgoingDateTime.toISOString();
   

方案2：让DateTimePicker直接使用UTC时区（可选） #

如果希望Picker界面也以UTC显示时间，可以给DateTimePicker添加timezone="UTC"属性（需确保@mui/x-date-pickers版本在v5.0及以上）：

<DateTimePicker
    label="Outgoing Date and Time"
    value={ job.outgoingDateTime }
    onChange={ handleOutgoingDateTimeChange }
    inputFormat="DD/MM/YYYY HH:mm"
    ampm={ false }
    timezone="UTC"
    renderInput={(params) => <TextField {...params} />} />

验证效果 #

修改完成后，输入2022-09-13T21:05:00.000Z并提交，输出结果会保持为"2022-09-13T21:05:00.000Z"，不再出现时区偏移。

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