MUI DateTimePicker如何隐藏不可选的早时段选项？

要实现彻底隐藏而非仅置灰的效果，光靠minDateTime可不行——它只能禁用选项，没法直接隐藏。得自定义时间选择器的选项过滤逻辑，具体操作如下：

1. 自定义小时选项过滤逻辑 #

利用DateTimePicker的renderTime属性，替换默认的时间面板，自己控制小时选项的生成和显示：

import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePickerToolbar, TimePickerView } from '@mui/x-date-pickers/TimePicker';
import { Select, MenuItem } from '@mui/material';

const CustomTimePanel = ({ value, onChange, timeSteps }) => {
  const now = dayjs();
  const isCurrentPM = now.format('A') === 'PM';

  // 生成过滤后的小时选项
  const getFilteredHours = () => {
    const filteredHours = [];
    // 当前是PM的话，只处理12-23点（对应PM时段）；AM则处理0-11点
    const startHour = isCurrentPM ? 12 : 0;
    const endHour = isCurrentPM ? 23 : 11;

    for (let hour = startHour; hour <= endHour; hour++) {
      // 当前是PM时，跳过比当前小时早的选项
      if (isCurrentPM && hour < now.hour()) continue;
      filteredHours.push(hour);
    }
    return filteredHours;
  };

  const handleHourSelect = (newHour) => {
    onChange(value.hour(newHour));
  };

  return (
    <TimePickerToolbar value={value} onChange={onChange} timeSteps={timeSteps}>
      <TimePickerView view="hours">
        <Select
          value={value.hour()}
          onChange={(e) => handleHourSelect(Number(e.target.value))}
          fullWidth
        >
          {getFilteredHours().map(hour => (
            <MenuItem key={hour} value={hour}>
              {dayjs().hour(hour).format('h A')}
            </MenuItem>
          ))}
        </Select>
      </TimePickerView>
      {/* 保留默认分钟选择器，也可以按需自定义 */}
      <TimePickerView view="minutes" />
    </TimePickerToolbar>
  );
};

// 用自定义时间面板替换默认的时间选择器
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimePicker 
    value={inputValue ? dayjs(inputValue) : null}
    maxDateTime={dayjs().add(6, "month")}
    onChange={handleInputChange}
    timeSteps={{ minutes: 15 }}
    format="MMM DD, YYYY h:mm A"
    renderTime={props => <CustomTimePanel {...props} />}
  />
</LocalizationProvider>

核心逻辑说明 #

• 隐藏AM选项：当前处于PM时段时，直接从12点（PM的12点）开始生成小时选项，自然不会出现AM的0-11点（对应12AM到11AM）。
• 隐藏早于当前的PM小时：遍历小时列表时，跳过比当前系统小时小的项，确保只显示当前及之后的下午时段小时。
• 完全控制时间面板：通过renderTime替换默认组件，彻底掌控哪些选项该显示、哪些该隐藏。

额外提示 #

如果要支持跨日期选择（比如用户选第二天的日期），记得把判断逻辑从系统当前时间改成选中的日期时间，不然切换日期后过滤逻辑会出错。另外，分钟选项如果也需要隐藏早于当前分钟的项，同样可以用类似的自定义逻辑处理。

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