如何在antd TimePicker中限制持续时间？

在 antd TimePicker 中限制持续时间可以通过设置 disabledHours 和 disabledMinutes 属性来实现。这两个属性可以接受一个函数，该函数返回一个数组，数组中包含需要禁用的小时或分钟值。

下面是一个示例代码，演示如何在 antd TimePicker 中限制持续时间为最多2小时：

import React, { useState } from 'react';
import { TimePicker } from 'antd';

const CustomTimePicker = () => {
  const [startTime, setStartTime] = useState(null);

  const handleTimeChange = (time, timeString) => {
    // 根据需要限制的持续时间计算结束时间
    const endTime = time.clone().add(2, 'hours');
    console.log('Start Time:', timeString);
    console.log('End Time:', endTime.format('HH:mm'));
  };

  const disabledHours = () => {
    // 返回需要禁用的小时数组，例如只允许选择 8 点到 18 点之间的时间
    const hours = [];
    for (let i = 0; i < 8; i++) {
      hours.push(i);
    }
    for (let i = 19; i < 24; i++) {
      hours.push(i);
    }
    return hours;
  };

  const disabledMinutes = (selectedHour) => {
    // 返回需要禁用的分钟数组，例如当选择的小时为 18 时，禁用 30 分钟之后的时间
    if (selectedHour === 18) {
      const minutes = [];
      for (let i = 31; i < 60; i++) {
        minutes.push(i);
      }
      return minutes;
    }
    return [];
  };

  return (
    <TimePicker
      value={startTime}
      onChange={handleTimeChange}
      disabledHours={disabledHours}
      disabledMinutes={disabledMinutes}
    />
  );
};

export default CustomTimePicker;

在上面的示例中，disabledHours 函数返回一个包含需要禁用的小时数组，限制了可选时间为 8 点到 18 点之间以及 19 点到 23 点之间的时间。disabledMinutes 函数返回一个包含需要禁用的分钟数组，当选择的小时为 18 时，禁用了 30 分钟之后的时间。

这样，用户在选择时间时，只能选择从 8 点到 18 点之间的时间，并且在选择 18 点时，只能选择 30 分钟之前的时间。对于持续时间的限制，可以在 handleTimeChange 函数中根据选定的开始时间计算结束时间。

注意：在示例中，没有提到具体的腾讯云产品和产品介绍链接地址，因为腾讯云和其他流行的云计算品牌商在这个问题中没有直接相关性。如果您需要了解腾讯云的云计算产品，可以访问腾讯云官网查看相关文档和产品介绍。