MUI X DateTimePicker时区问题：传入值与显示值不符

问题根源 #

@mui/x-date-pickers/DateTimePicker默认使用本地时区解析传入的Date对象。你传入的是Mon Sep 26 2022 11:54:22 GMT+0000（UTC时间），组件会自动转换为当前用户所在时区的时间，导致显示结果比传入值多1-2小时。

解决方案 #

1. 启用UTC模式

直接给组件添加utc属性，强制组件以UTC时区处理和显示时间：

<DateTimePicker
  label={label}
  value={formikField.value}
  disabled={disabled}
  onChange={(newValue) => {
    helpers.setValue(newValue);
  }}
  renderInput={(params) => (
    <TextField {...params} {...field} fullWidth error={meta.touched && Boolean(meta.error)} helperText={meta.error} />
  )}
  minDate={props.minDate ?? null}
  utc // 启用UTC模式，与传入的GMT+0000时间保持一致
/>

2. 固定指定时区（如UTC）

如果需要全局固定时区，可配合dayjs的时区插件配置：

• 安装依赖：

npm install dayjs-plugin-utc dayjs-timezone

• 在项目入口文件配置dayjs：

import dayjs from 'dayjs';
import utc from 'dayjs-plugin-utc';
import timezone from 'dayjs-timezone';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault('UTC'); // 设置默认时区为UTC

配置后组件会始终以UTC时区处理时间，不受用户本地时区影响。

3. 确保传入的Date对象格式正确

若Formik的value是字符串格式，建议先转换为标准UTC Date对象再传入：

// 方式1：原生Date处理
const utcDate = new Date(formikField.value);
// 方式2：dayjs确保UTC格式
const utcDate = dayjs(formikField.value).utc().toDate();

<DateTimePicker
  value={utcDate}
  // 其他属性不变
/>

内容的提问来源于stack exchange，提问作者E.Tabaku