Ant Design RangePicker如何根据日期禁用特定时分？

Ant Design 的 RangePicker 组件中，disabledTime 属性对应的函数可以接收两个参数：当前选中的日期对象（currentDate）和时间选择器类型（type，值为 'start' 或 'end'）。你只需要修改 horasImp 函数，让它接收这两个参数，就能在禁用逻辑中获取到当前选中的日期，进而实现按日期禁用特定时间的需求。

修改后的完整代码 #

<RangePicker
  changeOnBlur={true}
  onChange={horas}
  disabledDate={datasImp}
  // 传递currentDate和type给horasImp
  disabledTime={(currentDate, type) => horasImp(currentDate, type)}
  placeholder={["Begin", "End"]}
  showTime={{format:'HH:mm'}} 
  format="DD/MM/YYYY HH:mm"
/>

// 让horasImp接收currentDate和type参数
const horasImp = (currentDate, type) => {
  // 判断当前选中日期是否为今天
  const isToday = currentDate.isSame(dayjs(), 'day');
  // 示例：判断是否为某个特定日期
  const isSpecialDate = currentDate.isSame('2024-05-20', 'day');

  return {
    disabledHours: () => {
      let disabledHours = [...range(0, 6), ...range(23, 24)];
      
      // 如果是今天，额外禁用当前小时之前的所有小时
      if (isToday) {
        const currentHour = dayjs().hour();
        disabledHours = [...disabledHours, ...range(0, currentHour)];
      }

      // 可根据type区分开始/结束时间做不同处理（可选）
      // if (type === 'end') { ... }

      return [...new Set(disabledHours)]; // 去重避免重复禁用
    }, 
    disabledMinutes: (hour) => {
      // 今天且选中当前小时时，禁用当前分钟之前的分钟
      if (isToday && hour === dayjs().hour()) {
        return range(0, dayjs().minute());
      }
      // 特定日期的22点，禁用31分及以后的分钟
      else if (isSpecialDate && hour === 22) {
        return range(31, 60);
      }
      // 其他情况不禁用
      else {
        return [];
      }
    },
  };
}

const datasImp = (current) => {
  return current && current < dayjs().subtract(1, 'day');
}

关键说明 #

1. 获取当前选中日期：通过 disabledTime 传递的 currentDate 参数，你可以用 dayjs 的 isSame 方法判断日期维度（如年、月、日），实现不同日期的差异化禁用逻辑。
2. 区分开始/结束时间：如果需要对开始时间和结束时间设置不同的禁用规则，可以通过 type 参数（'start' 或 'end'）做区分处理。
3. 灵活扩展逻辑：你可以根据业务需求，添加更多日期判断条件，比如节假日、特定活动日等，来定制对应的时间禁用规则。

内容的提问来源于stack exchange，提问作者João Pedro Oliveira