使用Day.js适配器时MUI X DateTimePicker报TypeError问题求助

问题根源 #

MUI X的日期选择器组件要求value必须是Day.js实例（或适配的日期对象），而你将选中的Day.js对象转为字符串存储，导致组件接收的是字符串类型值——字符串没有isValid()方法，因此触发报错。初始值设为null/空时无法渲染，通常是因为未正确配置Day.js适配器的全局上下文。

具体解决步骤 #

1. 确保正确安装并配置Day.js适配器

首先安装与@mui/x-date-pickers版本匹配的适配器包：

npm install @mui/x-date-pickers-dayjs-adapter@7.4.0

然后在组件树的顶层用LocalizationProvider包裹，指定Day.js适配器：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import TextField from '@mui/material/TextField';

// 全局或组件层级包裹
function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <YourDateTimePickerComponent />
    </LocalizationProvider>
  );
}

2. 保持状态为Day.js实例，按需转换为字符串

组件的value必须是Day.js实例或null/undefined，不要直接将状态存为字符串。需要格式化输出时，在状态更新后再转换：

import { useState } from 'react';
import dayjs from 'dayjs';

function YourDateTimePickerComponent() {
  // 初始值设为null，适配器会正确处理空状态
  const [selectedDate, setSelectedDate] = useState(null);
  // 可选：单独存储格式化后的字符串用于提交/展示
  const [formattedDate, setFormattedDate] = useState('');

  const handleDateChange = (newDate) => {
    setSelectedDate(newDate);
    // 仅在需要时转换为字符串
    setFormattedDate(newDate ? newDate.format('YYYY-MM-DD HH:mm:ss') : '');
  };

  return (
    <DateTimePicker
      label="选择日期时间"
      value={selectedDate}
      onChange={handleDateChange}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

3. 验证依赖版本一致性

确保@mui/x-date-pickers、@mui/x-date-pickers-dayjs-adapter版本完全一致（均为7.4.0），避免版本不匹配导致的适配问题。你的dayjs@1.11.11版本符合7.x系列的要求，无需升级。

额外说明 #

• 初始值设为null时，只要适配器配置正确，组件会正常渲染空状态，不会触发报错。
• 不要手动将null转换为其他值，适配器会自动处理空值的显示逻辑。

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