如何基于Antd TimePicker.RangePicker的开始时间自动预设结束时间？

当然可以实现这个需求，核心是将RangePicker设为受控组件，通过onChange事件监听时间选择状态，当仅选中开始时间时，自动计算并设置结束时间。

实现示例代码 #

import { useState } from 'react';
import { TimePicker } from 'antd';
import dayjs from 'dayjs';

const { RangePicker } = TimePicker;

const AutoEndTimePicker = () => {
  // 维护时间范围的状态
  const [timeRange, setTimeRange] = useState([null, null]);

  const handleTimeChange = (values) => {
    const [startTime, endTime] = values;
    // 仅当选中开始时间但未选择结束时间时触发自动设置逻辑
    if (startTime && !endTime) {
      // 自动设置为开始时间加1小时，可按需调整间隔
      const autoEndTime = startTime.add(1, 'hour');
      setTimeRange([startTime, autoEndTime]);
    } else {
      // 正常更新时间范围（比如手动选择结束时间或清空）
      setTimeRange(values);
    }
  };

  return (
    <RangePicker
      value={timeRange}
      onChange={handleTimeChange}
      format="h a" // 匹配示例中的"8 am"格式
    />
  );
};

export default AutoEndTimePicker;

关键说明 #

• 依赖dayjs处理时间运算，Antd默认集成该库；若使用旧版本Antd（依赖moment），只需将dayjs替换为moment，语法基本一致
• 可自由调整时间间隔：比如要设置为开始时间加30分钟，只需修改startTime.add(30, 'minute')
• 保持组件为受控状态，确保自动设置的结束时间能实时渲染到界面上

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