如何配置React DateTimePicker默认选中下午4点且初始输入框不显示该值？

要实现输入框初始为空，点击选择器图标后才展示当天下午4点的预设值，可以通过以下方式修改代码：

核心方案 #

• 初始将绑定的状态值设为null，让输入框默认无内容
• 跟踪选择器的打开状态，动态设置选择器内部的显示值：打开且未选中任何值时，预设为当天16:00；关闭或已有选中值时，使用用户选择的时间
• 自定义输入框渲染逻辑，确保输入框仅在用户确认选择后才显示时间

修改后的完整代码 #

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

const YourComponent = () => {
  // 初始值设为null，确保输入框为空
  const [myDatePickerValue, setMyDatePickerValue] = useState(null);
  // 跟踪选择器是否打开
  const [isPickerOpen, setIsPickerOpen] = useState(false);

  const handleMyDatePickerValueChange = (date) => {
    setMyDatePickerValue(date);
  };

  // 动态计算选择器要显示的值
  const pickerValue = isPickerOpen && !myDatePickerValue 
    ? dayjs().hour(16).minute(0).second(0).millisecond(0) 
    : myDatePickerValue ? dayjs(myDatePickerValue) : null;

  return (
    <DateTimePicker
      name={'myDatePickerValue'}
      disablePast
      onChange={handleMyDatePickerValueChange}
      value={pickerValue}
      format="DD-MMM-YYYY hh:mm A"
      minDateTime={dayjs()}
      // 更新选择器打开状态
      onOpen={() => setIsPickerOpen(true)}
      onClose={() => setIsPickerOpen(false)}
      // 自定义输入框，仅在有选中值时显示内容
      renderInput={(params) => (
        <input
          {...params}
          value={myDatePickerValue ? params.value : ''}
          onChange={params.onChange}
        />
      )}
    />
  );
};

export default YourComponent;

关键逻辑说明 #

1. 状态初始化：myDatePickerValue初始为null，直接让输入框无默认显示内容。
2. 动态值控制：通过isPickerOpen状态判断，选择器打开且未选值时自动填充当天16:00，既满足预设需求，又不会让输入框提前显示。
3. 输入框自定义：利用renderInput覆盖默认输入框的显示逻辑，确保只有用户选择了时间后，输入框才会展示对应值。
4. 状态同步：onOpen和onClose回调实时更新选择器的打开状态，保证动态值计算的正确性。

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