使用MUI X日期选择器时出现value.isUTC is not a function错误

错误详情 #

value.isUTC is not a function
./node_modules/@mui/x-date-pickers/AdapterMoment/AdapterMoment.js/AdapterMoment/this.getTimezone@

场景说明 #

待解析日期：2024-03-12

当前解析代码：

const startDateIntervalFrom = startStringIntervalFrom ? moment(startStringIntervalFrom, searchFilterDateFormat).utc().toDate() : null;

日期选择器代码：

<DatePicker
  label="From"
  value={start}
  onChange={handleStartDateChange}
/>

已确认解析出的Date对象正确，但选择器仍触发报错。

问题原因 #

从报错路径能看出你使用的是AdapterMoment适配器，MUI X Date Picker搭配该适配器时，要求传入的value必须是moment实例，而非原生Date对象。你调用.toDate()把moment对象转成了原生Date，而原生Date没有isUTC方法，适配器识别失败就抛出了这个错误。

解决步骤 #

1. 修改解析逻辑，保留moment实例
   去掉.toDate()，直接用moment对象作为选择器的value：

   const startDateIntervalFrom = startStringIntervalFrom ? moment(startStringIntervalFrom, searchFilterDateFormat).utc() : null;
   

2. 同步更新onChange处理逻辑
   handleStartDateChange接收的参数会是moment实例，后续处理要对应调整：

   const handleStartDateChange = (newValue) => {
     setStart(newValue);
     // 如果需要转成字符串存状态，可以这么做：
     // setStartString(newValue?.format(searchFilterDateFormat) || null);
   };
   

3. 确认适配器配置正确
   确保DatePicker被LocalizationProvider包裹，且指定了Moment适配器：

   import { LocalizationProvider } from '@mui/x-date-pickers';
   import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
   
   // 在根组件或父组件中配置
   function YourComponent() {
     return (
       <LocalizationProvider dateAdapter={AdapterMoment}>
         <DatePicker label="From" value={start} onChange={handleStartDateChange} />
       </LocalizationProvider>
     );
   }
   

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