React.js中如何校验startTime是否小于endTime？

实现原理 #

将react-timekeeper返回的带am/pm标识的12小时制时间字符串，统一转换为当日0点开始计算的总分钟数，直接比较数值大小即可完成校验。

具体实现步骤 #

• 第一步：封装时间转分钟数的工具函数

// 入参为格式如"1:00 am"的12小时制时间字符串
const convertTimeToMinutes = (timeStr) => {
  const [timePart, period] = timeStr.split(' ');
  const [hours, minutes] = timePart.split(':').map(Number);
  let adjustedHours = hours;
  // pm时段12点不做累加，其余小时加12转为24小时制
  if (period.toLowerCase() === 'pm' && hours !== 12) {
    adjustedHours += 12;
  }
  // am时段12点对应24小时制的0点
  if (period.toLowerCase() === 'am' && hours === 12) {
    adjustedHours = 0;
  }
  // 返回当日总分钟数
  return adjustedHours * 60 + minutes;
}

• 第二步：封装校验逻辑函数

// 入参为startTime和endTime两个12小时制时间字符串
const isEndTimeValid = (startTime, endTime) => {
  const startTotal = convertTimeToMinutes(startTime);
  const endTotal = convertTimeToMinutes(endTime);
  return endTotal > startTotal;
}

• 第三步：在react-timekeeper的使用逻辑中调用校验
  react-timekeeper组件的onChange回调返回值中，formatted12字段就是标准的12小时制带am/pm的时间字符串，可直接拿来做校验，示例代码如下：

import { useState } from 'react';
import TimeKeeper from 'react-timekeeper';

const TimeSelect = () => {
  const [startTime, setStartTime] = useState('1:00 am');
  const [endTime, setEndTime] = useState('12:00 pm');
  const [timeError, setTimeError] = useState('');

  // 校验逻辑触发时机：结束时间变更、提交表单时都可以调用
  const checkTimeValid = () => {
    const valid = isEndTimeValid(startTime, endTime);
    setTimeError(valid ? '' : '结束时间必须晚于开始时间');
    return valid;
  }

  return (
    <div>
      <div>
        <label>开始时间</label>
        <TimeKeeper
          time={startTime}
          onChange={(val) => setStartTime(val.formatted12)}
        />
      </div>
      <div>
        <label>结束时间</label>
        <TimeKeeper
          time={endTime}
          onChange={(val) => {
            setEndTime(val.formatted12);
            // 结束时间变更时实时校验
            checkTimeValid();
          }}
        />
      </div>
      {timeError && <p style={{ color: 'red', fontSize: '14px' }}>{timeError}</p>}
      <button onClick={() => {
        if (checkTimeValid()) {
          // 校验通过后执行提交逻辑
          console.log('时间范围合法，提交数据');
        }
      }}>提交</button>
    </div>
  )
}

特殊场景说明 #

如果业务允许跨天选择时间（例如开始时间为22:00，结束时间为次日02:00），可以在校验不通过时新增跨天标识判断，跨天场景下给结束时间的总分钟数加上1440（一天的总分钟数）后再和开始时间的总分钟数比较即可。

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