MUI-X Datepicker的ddd格式无法更新问题求助

问题核心 #

手动修改日期数字后，输入框的星期缩写（ddd）未同步更新，但内部dayjs状态已正确变更；直接用useEffect修改输入框值会被组件自身覆盖。

方案1：通过onChange实时强制格式化输入框 #

利用onChange事件拿到最新日期后，手动格式化并更新输入框内容，避免组件自动更新的滞后问题：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';

export default function FixedDatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs('2023-08-11'));
  const inputRef = useRef(null);

  const handleDateChange = (newDate) => {
    setSelectedDate(newDate);
    // 拿到最新日期后，强制格式化输入框值
    if (inputRef.current && newDate.isValid()) {
      inputRef.current.value = newDate.format('ddd dd-MMM-YYYY');
    }
  };

  return (
    <DatePicker
      ref={inputRef}
      value={selectedDate}
      onChange={handleDateChange}
      format="ddd dd-MMM-YYYY"
      inputFormat="ddd dd-MMM-YYYY"
    />
  );
}

方案2：自定义输入组件完全控制解析与显示 #

如果需要更稳定的自定义行为，可以封装输入组件，忽略输入的星期部分，只解析日期，再重新格式化正确的星期显示：

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

// 自定义输入组件
const CustomDateInput = ({ value, onChange, inputProps }) => {
  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    // 提取输入中的日期部分，忽略星期缩写
    const dateSegment = inputValue.split(' ').slice(1).join(' ');
    const parsedDate = dayjs(dateSegment, 'dd-MMM-YYYY');
    
    if (parsedDate.isValid()) {
      onChange(parsedDate);
    }
  };

  return (
    <TextField
      value={value ? value.format('ddd dd-MMM-YYYY') : ''}
      onChange={handleInputChange}
      {...inputProps}
    />
  );
};

// 使用自定义输入组件的DatePicker
export default function CustomInputDatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs('2023-08-11'));

  return (
    <DatePicker
      value={selectedDate}
      onChange={setSelectedDate}
      renderInput={(props) => <CustomDateInput {...props} />}
    />
  );
}

方案说明 #

• 方案1属于快速修复，通过直接操作输入框DOM强制同步显示，适合简单场景；
• 方案2从输入解析逻辑入手，彻底避免星期与日期不匹配的问题，适合需要复杂输入校验的场景。

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