ant-design-vue Vue3 TimePicker组件限制起始时间小于结束时间

效果

起始时间已选限制结束时间

结束时间已选限制起始时间

<BasicForm @register="registerForm">
    <template #date_type="{ model }">
        <FormItemRest>
          <div>
            <TimePicker
              v-model:value="model['start_time']"
              placeholder="起始时间"
              format="HH:mm"
              valueFormat="HH:mm"
              :disabledHours="
                () => getDisabledTime(model['start_time'], model['end_time'], 'start_time', 'H')
              "
              :disabledMinutes="
                (selectedHour) =>
                  getDisabledTime(
                    model['start_time'],
                    model['end_time'],
                    'start_time',
                    'M',
                    selectedHour,
                  )
              "
            >
              <template #suffixIcon> </template>
            </TimePicker>
            <SvgIcon name="minus" :size="12" />
            <TimePicker
              :bordered="false"
              v-model:value="model['end_time']"
              placeholder="结束时间"
              format="HH:mm"
              valueFormat="HH:mm"
              :disabledHours="
                () => getDisabledTime(model['start_time'], model['end_time'], 'end_time', 'H')
              "
              :disabledMinutes="
                (selectedHour) =>
                  getDisabledTime(
                    model['start_time'],
                    model['end_time'],
                    'end_time',
                    'M',
                    selectedHour,
                  )
              "
            />
          </div>
        </FormItemRest>
    </template>
</BasicForm>

  // 时间限制 返回不可选的数组
  function getDisabledTime(start_time, end_time, fieldType, timeType, selectedHour = 0) {
    // 起始时间-时、分
    let start_time_H = parseInt((start_time?.split && start_time?.split(':')?.[0]) || 0);
    let start_time_M = parseInt((start_time?.split && start_time?.split(':')?.[1]) || 0);
    // 结束时间-时、分
    let end_time_H = parseInt((end_time?.split && end_time?.split(':')?.[0]) || 0);
    let end_time_M = parseInt((end_time?.split && end_time?.split(':')?.[1]) || 0);
    // 不可选的时间值数组
    let times: Array<number> = [];
    
    // 已选择结束时间，判断起始时间范围
    if (fieldType === 'start_time' && end_time) {
      // 判断不可选的小时 时间段
      if (timeType === 'H') {
        for (let i = end_time_H + 1; i < 24; i++) {
          times.push(i);
        }
      } else if (end_time_H === selectedHour) {
      // 判断不可选的分钟 时间段
        for (let i = end_time_M; i < 60; i++) {
          times.push(i);
        }
      }
    } else if (fieldType === 'end_time' && start_time) {
    // 已选起始时间，判断结束时间范围
      // 判断不可选的小时 时间段
      if (timeType === 'H') {
        for (let i = 0; i < start_time_H; i++) {
          times.push(i);
        }
      } else if (start_time_H === selectedHour) {
      // 判断不可选的分钟 时间段
        for (let i = 0; i < start_time_M + 1; i++) {
          times.push(i);
        }
      }
    }
    return times;
  }