日期与时间输入框校验需求：实现今日及当前时间的合法性校验提示

以下是满足需求的完整实现代码，核心逻辑是将用户选择的日期时间与当前时间对比，判断是否符合要求：

import { useState, useEffect } from 'react';

const DateTimePicker = () => {
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  // 校验日期时间的核心函数
  const validateDateTime = () => {
    if (!date || !time) {
      setErrorMessage('');
      return;
    }

    // 将选择的日期和时间组合成完整的 Date 对象
    const selectedDateTime = new Date(`${date}T${time}`);
    // 获取当前时间（创建副本避免后续操作影响）
    const currentDateTime = new Date();

    // 对比选中时间与当前时间
    if (selectedDateTime > currentDateTime) {
      setErrorMessage('请选择更早的时间');
    } else {
      setErrorMessage('');
    }
  };

  // 日期或时间变化时自动触发校验
  useEffect(() => {
    validateDateTime();
  }, [date, time]);

  return (
    <div>
      <input 
        type="date" 
        value={date}
        onChange={(e) => setDate(e.target.value)} 
      />
      <input 
        type="time" 
        value={time}
        onChange={(e) => setTime(e.target.value)} 
      />
      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
    </div>
  );
};

export default DateTimePicker;

关键细节说明： #

• 状态管理：用useState维护用户选择的日期、时间，以及校验错误提示文本
• 校验逻辑：
  1. 先判断日期和时间是否都已选择，避免空值引发的转换错误
  2. 将选中的日期与时间拼接为YYYY-MM-DDTHH:mm格式的字符串，转换为标准Date对象
  3. 直接对比选中时间对象与当前时间对象，判断是否超出当前时间范围
• 实时校验：通过useEffect监听date和time的状态变化，每次更新后自动执行校验
• 错误提示：校验不通过时渲染红色提示文本，通过时自动隐藏

可选优化方向： #

• 给输入框添加required属性，强制用户必须选择日期和时间
• 在表单提交环节再次触发校验，确保最终提交的数据符合要求

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