如何在Material UI TimePicker中仅启用指定时段并禁用其余时段

要实现仅启用指定时段、禁用其余时间的需求，核心是利用Material UI TimePicker提供的shouldDisableTime属性，通过自定义判断逻辑来控制时间选项的禁用状态。以下针对你提供的两种时段数组格式分别给出实现方案：

方案一：针对timeSlots（HH:mm格式） #

步骤1：预处理允许的时段 #

将允许的时段数组转换为Set结构，提升后续查找效率：

const timeSlots = [ "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30" ];
const allowedTimeSet = new Set(timeSlots);

步骤2：编写禁用判断函数 #

实现shouldDisableTime函数，根据当前时间和视图类型判断是否禁用：

const shouldDisableTime = (value, view) => {
  if (!value) return false; // 处理初始值为空的情况

  const hours = value.getHours().toString().padStart(2, '0');

  // 小时视图：如果该小时没有任何允许的时段，直接禁用整个小时
  if (view === 'hours') {
    return !timeSlots.some(slot => slot.startsWith(`${hours}:`));
  }

  // 分钟视图：判断当前时分是否在允许列表中
  const minutes = value.getMinutes().toString().padStart(2, '0');
  const currentTimeStr = `${hours}:${minutes}`;
  return !allowedTimeSet.has(currentTimeStr);
};

步骤3：集成到TimePicker组件 #

将判断函数传给shouldDisableTime属性：

<TimePicker
  label="Time"
  value={value}
  onChange={handleChange}
  shouldDisableTime={shouldDisableTime}
  renderInput={(params) => <TextField {...params} />}
/>

方案二：针对arr（HH:mm:ss格式） #

如果允许的时段是精确到秒的格式，只需调整时间转换和判断逻辑：

步骤1：预处理允许的时段 #

const arr = ["11:00:00","11:10:00","13:00:00"];
const allowedTimeSet = new Set(arr);

步骤2：编写禁用判断函数 #

const shouldDisableTime = (value, view) => {
  if (!value) return false;

  const hours = value.getHours().toString().padStart(2, '0');
  const minutes = value.getMinutes().toString().padStart(2, '0');
  const seconds = value.getSeconds().toString().padStart(2, '0');
  const currentTimeStr = `${hours}:${minutes}:${seconds}`;

  // 优化小时视图体验：如果该小时没有允许的秒级时段，禁用整个小时
  if (view === 'hours') {
    return !arr.some(slot => slot.startsWith(`${hours}:`));
  }

  return !allowedTimeSet.has(currentTimeStr);
};

步骤3：集成到组件 #

同样将shouldDisableTime传入TimePicker即可。

关键说明 #

• shouldDisableTime函数接收两个参数：value（当前选中的Date对象）和view（当前的视图类型，可选值为hours/minutes/seconds）。
• 使用Set替代数组查找，能大幅提升判断效率，尤其当允许时段数量较多时。
• 针对不同视图做分层判断，能优化用户选择体验，避免用户点击无有效时段的小时。

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