React中如何让react-ts-timepicker选中时间为小时区间格式

安全阿岳

2026-9-30

React-TS-Timepicker 实现选中时间显示为小时区间方案

实现思路

你当前配置了step=60，时间选择粒度为1小时，只需要在选中单个时间点后，自动计算该时间加1小时的对应12小时制格式，再拼接为区间格式存入状态即可。

具体代码修改

1. 新增时间加1小时的工具方法

// 入参为你parseTime后得到的时间对象（包含小时、分钟、am/pm标识）
const getNextHourTime = (timeObj: {hour: number, minute: number, period: 'am'|'pm'}) => {
  let nextHour = timeObj.hour + 1;
  let nextPeriod = timeObj.period;
  // 处理12小时制进位逻辑
  if (nextHour === 12) {
    nextPeriod = timeObj.period === 'am' ? 'pm' : 'am';
  }
  if (nextHour > 12) {
    nextHour = nextHour - 12;
  }
  // 补0处理，保证格式为XX:00
  const formatHour = nextHour.toString().padStart(2, '0');
  return `${formatHour}:00${nextPeriod}`;
}

2. 修改时间选择回调逻辑

handleChangeTime = (e) => {
  let timeResult = this.parseTime(e, null);
  // 拿到选中的开始时间
  const startTime = this.getTime(timeResult);
  // 计算结束时间
  const endTime = getNextHourTime(timeResult);
  // 拼接为区间格式存入状态
  this.setState({ selectedTime: `${startTime} - ${endTime}` });
};

3. 组件部分无需修改，保持原有配置即可

<ReactTimePicker
    value={this.state.selectedTime}
    minTime={this.state.minTime} //09:00am
    maxTime={this.state.maxTime} //09:00pm
    step={60}
    onChange={this.handleChangeTime} 
    allowOnlySuggestions
    className="future-order-time-input"
/>