如何在antd TimePicker组件中限制可选时间的范围

antd TimePicker 本身提供了禁用指定时间维度的官方API，无需自定义改造组件即可实现时间范围限制，核心使用disabledHours、disabledMinutes、disabledSeconds三个属性分别控制小时、分钟、秒的可选范围，TimePicker.RangePicker范围时间选择器也通用该配置。

实现示例 #

以限制仅可选08:00-17:59时间段为例，代码如下：

import { TimePicker } from 'antd';

const TimeRangePicker = () => {
  // 定义需要禁用的小时：返回0-7、18-23的小时数组
  const disabledHours = () => {
    return Array.from({length: 24}, (_, i) => i).filter(hour => hour < 8 || hour > 17)
  }

  // 若需要更细粒度的限制，可追加分钟/秒的禁用逻辑
  // 例：17点仅允许选0-30分
  const disabledMinutes = (selectedHour) => {
    if (selectedHour === 17) {
      return Array.from({length: 60}, (_, i) => i).filter(min => min > 30)
    }
    return []
  }

  return (
    <TimePicker
      format="HH:mm"
      disabledHours={disabledHours}
      disabledMinutes={disabledMinutes}
    />
  )
}

export default TimeRangePicker;

效果说明 #

默认状态下TimePicker会展示全部24小时选项：

添加上述配置后，不在指定范围的小时/分钟会被置灰不可选择，滚动选择器也会自动限制可选区间，完全符合需求。

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