MUI X DatePicker onAccept手动输入不触发，需实现有效日期确认后更新状态

• 核心思路：给DatePicker的文本输入框添加**失焦（onBlur）和回车按键（onKeyDown）**事件，结合日期有效性校验，仅在输入日期有效且用户确认时更新状态；同时保留onAccept处理日历选择的场景，覆盖所有操作方式。

修改后的代码实现 #

import { LocalizationProvider, DatePicker, useDateAdapter } from '@mui/x-date-pickers';
// 根据你使用的日期库引入对应适配器，示例用Dayjs
import { DayjsAdapter } from '@mui/x-date-pickers/DayjsAdapter';
import { useState } from 'react';

const CustomDatePicker = () => {
  const dateAdapter = useDateAdapter();
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleValidDateConfirm = (inputValue) => {
    try {
      // 解析输入字符串，格式需与DatePicker的显示格式匹配
      const parsedDate = dateAdapter.parse(inputValue, 'yyyy-MM-dd');
      if (dateAdapter.isValid(parsedDate)) {
        setSelectedDate(parsedDate);
      }
    } catch (err) {
      // 解析失败则不更新状态，保留原有值
      console.log('输入日期无效');
    }
  };

  return (
    <LocalizationProvider dateAdapter={DayjsAdapter}>
      <DatePicker
        value={selectedDate}
        // 处理日历选择日期的场景
        onAccept={(value) => {
          setSelectedDate(value ?? new Date());
        }}
        // 空onChange仅保留MUI的无效日期视觉反馈，不更新状态
        onChange={() => {}}
        slotProps={{
          textField: {
            size: 'small',
            sx: { width: '175px', ml: 1 },
            // 失焦时校验日期
            onBlur: (e) => handleValidDateConfirm(e.target.value),
            // 按下Enter时校验日期
            onKeyDown: (e) => {
              if (e.key === 'Enter') {
                handleValidDateConfirm(e.target.value);
              }
            }
          },
        }}
      />
    </LocalizationProvider>
  );
};

关键说明 #

1. 禁用onChange状态更新：保留空onChange函数维持MUI自带的无效日期视觉提示（如红色边框），避免输入过程中频繁更新状态导致的错误值。
2. 日期有效性校验：通过useDateAdapter获取当前适配器的parse和isValid方法，确保输入字符串能被解析为合法日期对象。
3. 双事件覆盖确认场景：同时监听失焦和回车事件，适配用户手动输入后的两种确认操作习惯。
4. 兼容日历选择：保留onAccept处理通过日历面板选择日期的场景，确保两种操作路径都能正常更新状态。

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