MUI X Date Picker 日期格式化与默认值设置相关问题咨询

解决方案 #

MUI X Date Picker返回的是你配置的日期库（Dayjs/date-fns/Luxon）的封装对象，直接访问$d这类私有属性属于不合规用法，版本迭代后很容易失效，你可以按照以下步骤调整：

1. 先确认日期适配器配置

MUI X Date Picker依赖全局的日期适配器，这里以常用的Dayjs为例（你用其他日期库逻辑同理），先安装依赖：

npm install @mui/x-date-pickers @date-io/dayjs dayjs

在你的应用外层（比如App.jsx）加上全局的本地化Provider配置：

import { LocalizationProvider } from '@mui/x-date-pickers';
import AdapterDayjs from '@date-io/dayjs';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      {/* 你的其他业务组件，包括日期选择器组件 */}
    </LocalizationProvider>
  );
}

2. 调整日期选择器组件逻辑

核心修改点：拿到Picker返回的日期对象后，直接调用日期库的格式化方法，输出你需要的yyyy-MM-ddTHH:mm:ss+HH:mm格式即可，同时优化初始值赋值逻辑：

import React from 'react';
import TextField from '@mui/material/TextField';
import DateTimePicker from '@mui/x-date-pickers/DateTimePicker';
import dayjs from 'dayjs';

export default function DateTimePickerComponent(props) {
    const [value, setValue] = React.useState(null);

    const onDatePicked = (newValue) => {
        setValue(newValue);
        // 处理空值情况，有值就格式化为要求的格式
        const formattedDate = newValue ? dayjs(newValue).format('YYYY-MM-DDTHH:mm:ssZ') : null;
        props.onChange(formattedDate);
        console.log("格式化后的日期", formattedDate);
    };

    // 优化初始值同步逻辑，初始值变化时自动更新
    React.useEffect(() => {
        if (props.initialValue) {
            setValue(dayjs(props.initialValue));
        }
    }, [props.initialValue]);

    return (
        <DateTimePicker
            label={props.label}
            value={value}
            onChange={onDatePicked}
            renderInput={(params) => <TextField {...params} />}
        />
    );
}

格式说明

dayjs.format('YYYY-MM-DDTHH:mm:ssZ')输出的格式完全匹配你要求的yyyy-MM-ddThh:MM:ss+HH:mm，比如示例的2020-10-11T15:56:28+11:00。
如果你用其他日期库，对应格式化方法如下：

• date-fns：使用formatISO(newValue)方法直接输出目标格式
• Luxon：使用newValue.toISO()方法直接输出目标格式

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