Material UI v5 DateTimePicker：如何捕获日历日期点击回调？

在MUI X v5版本中，DateTimePicker的onChange确实没有提供区分触发源（文本输入/日历选择）的参数，但可以通过自定义日历日期单元格组件来实现仅捕获日历日期按钮点击的需求，同时自动将时间设置为00:00。

实现步骤 #

1. 替换默认的Day组件，自定义日期单元格的点击逻辑
2. 在自定义组件中处理日期，将小时、分钟重置为0后更新状态
3. 保留文本输入的原有onChange逻辑，不干扰用户手动输入时间

完整代码示例 #

import { DateTimePicker, Day } from '@mui/x-date-pickers';
import { TextField, Button } from '@mui/material';
import { useState } from 'react';

// 自定义日期单元格组件
const CustomDay = (props) => {
  const { setDate } = props; // 可通过props传递状态更新函数，或使用上下文

  const handleClick = (event) => {
    // 获取当前点击的日期
    const selectedDate = props.day;
    // 将时间部分重置为00:00:00.000
    const adjustedDate = new Date(selectedDate);
    adjustedDate.setHours(0, 0, 0, 0);
    
    // 更新状态
    setDate(adjustedDate);
    // 调用组件原有点击逻辑（确保日历正常关闭等交互）
    props.onClick(event);
  };

  return <Day {...props} onClick={handleClick} />;
};

// 你的组件主体
const YourComponent = () => {
  const [date, setDate] = useState(new Date());
  const defaultDate = new Date(); // 替换为你的默认日期

  return (
    <DateTimePicker
      inputFormat="MM/dd/yyyy HH:mm"
      value={date}
      renderInput={(params) => <TextField {...params} />}
      onChange={(newDate) => {
        // 仅处理文本输入场景，保留用户手动输入的时间
        if (newDate) {
          setDate(newDate);
        }
      }}
      views={["day"]}
      components={{
        Day: (props) => <CustomDay {...props} setDate={setDate} />,
        ActionBar: ({ onAccept }) => (
          <Button
            onClick={() => {
              setDate(defaultDate);
              onAccept();
            }}
          >
            Reset to Default
          </Button>
        )
      }}
    />
  );
};

逻辑说明 #

• 自定义Day组件：通过替换默认的日期单元格组件，直接拦截日期按钮的点击事件，在其中调整时间后再更新状态。
• 区分场景处理：日历点击时通过自定义组件重置时间，文本输入时通过原有onChange保留用户输入的时间，完全满足需求。
• 兼容原有交互：调用props.onClick(event)确保日历的默认交互（如选择日期后自动关闭弹窗）不受影响。

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