ant-design动态根据选择的小时禁用分钟

假如现在有一个需求，你是一个公司的助理，在老板的日程表里，['09:00,''09:30',‘10:00’...‘11:30’]这些时间是可以接待客户的，其他时间已经满接待了，你在帮老板安排排程的时候，有这样的操作界面：

选择了日期后，再选择时间

首先，你需要根据日期去后端查出老板的排程表，假如得到如下结果：

  const [availableTimes, setAvailableTimes] = useState<string[]>(['01:00','01:30','02:30','11:30','12:00','18:00','19:30']);

为了避免重复排程，当你选择2点的时候，从availableTimes可以看出2点00分的选项是已经有安排的，应该禁用。那么，如何动态的根据选择的小时去禁用分钟的选项呢？直接上代码：

<TimePicker
    showNow={false}
    disabledTime={disabledTime}
    style={{ width: '100%' }}
    minuteStep={30}
    // hideDisabledOptions
    onChange={handleDatePickerChange}
    format={EUDateType.Minute}
/>

  // 返回小时，分钟，秒的中间的所有位数
  const range = (start, end) => {
    const result: any[] = [];
    for (let i: number = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };  


  /**
   * 根据后端返回可选的时间，反向禁用不可选的时间
   * @returns
   */
  const disabledTime: any = () => {
    const nowHour = new Date().getHours();
    const nowMinute = new Date().getMinutes();
    const now = moment();
    const nowTime = `${nowHour.toString().padStart(2, '0')}:${nowMinute
      .toString()
      .padStart(2, '0')}`;
    return {
      disabledHours: () =>
        moment(selectedBusinessDate).isSame(now, 'day') ? range(0, nowHour) : range(-1, -1),

      disabledMinutes: (selectedHour: number) => {
        console.log(selectedHour, 'selectedHour');
        // 如果选择的小时不在可选时间范围内，则禁用所有分钟和秒钟
        if (!availableTimes.some(time => parseInt(time.slice(0, 2)) == selectedHour)) {
          console.log('不在可选时间范围内');
          return range(0, 59);
        }
        // 如果选择的小时在可选时间范围内，则禁用不在可选时间范围内的分钟
        console.log('在可选时间范围内');
        const disabledMinutes = Array.from({ length: 60 }, (_, i) => i).filter(
          minute =>
            !availableTimes.includes(
              `${selectedHour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
            ) ||
            (minute !== 0 && minute !== 30)
        );
        // 比如现在18：18分，不在18:00后端列表里，但是，交互上需要实现禁用18：00的选项
        if (selectedHour === nowHour && !availableTimes.includes(nowTime)) {
          return [...disabledMinutes, ...range(0, nowMinute)];
        }
        return [...disabledMinutes];
      },

      // 秒钟全部禁用
      disabledSeconds: () => [0, 59]
    };
  };