React中MUI Datepicker选中日期变为前一日的修复请求

预期行为 #

• Datepicker初始化值必须为null，用户选择日期后值需与选中日期一致，即使用const [value, setValue] = useState(null)
• 若初始值设为new Date()，组件可正常显示正确日期

实际行为 #

选中日期后，组件设置的是错误的前一日日期

问题背景 #

使用MUI v5（MUI X DatePicker）时，将组件初始值设为null，会出现选中日期显示为前一日的异常，寻求解决方案。

代码示例 #

import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';
import dayjs from 'dayjs';

const disableWeekends = (date) => {
  const day = date.day();
  return day === 0 || day === 6;
};

const MyDatePicker = () => {
  const [date, setDate] = useState(null); // 初始值为null时出现问题

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Report Date"
        inputFormat="DD/MMM/YYYY"
        value={date}
        onChange={(newValue) => {
          setDate(newValue);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            color="info"
            inputProps={{
              ...params.inputProps,
              readOnly: true,
            }}
          />
        )}
        shouldDisableDate={disableWeekends}
      />
    </LocalizationProvider>
  );
};

export default MyDatePicker;

解决方案 #

该问题核心原因是时区转换偏差：dayjs默认使用本地时区，而MUI DatePicker在处理初始值为null的日期选择时，可能出现UTC与本地时区的解析差异。以下是几种可行的解决方法：

1. 强制使用UTC日期处理

在onChange中将选中日期转换为UTC模式，避免时区偏移：

onChange={(newValue) => {
  setDate(newValue ? newValue.utc() : null);
}}

2. 统一配置全局时区

安装dayjs时区插件并设置默认时区，确保日期处理一致：

// 在项目入口文件中配置
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);
// 设置为你所在的时区，例如东八区
dayjs.tz.setDefault('Asia/Shanghai');

3. 转换为本地日期对象

在onChange中将dayjs实例转换为本地Date对象后再重新封装：

onChange={(newValue) => {
  setDate(newValue ? dayjs(newValue.toDate()) : null);
}}

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