ReactJS中minDate与maxDate校验需求：maxDate为minDate+5年

1. 计算基础日期范围 #

首先算出minDate（今日）和maxDate（今日+5年），统一适配input[type="date"]要求的YYYY-MM-DD格式：

// 获取今日日期，转成YYYY-MM-DD格式
const getToday = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 获取今日+5年的日期，转成YYYY-MM-DD格式
const getMaxDate = () => {
  const today = new Date();
  const maxDate = new Date(today);
  maxDate.setFullYear(today.getFullYear() + 5);
  const year = maxDate.getFullYear();
  const month = String(maxDate.getMonth() + 1).padStart(2, '0');
  const day = String(maxDate.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 初始化日期范围常量
const minDate = getToday();
const maxDate = getMaxDate();

2. 原生React受控组件校验 #

不用表单库的情况下，通过受控组件实现实时校验：

import { useState } from 'react';

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleDateChange = (e) => {
    const value = e.target.value;
    setSelectedDate(value);

    // 实时校验逻辑
    if (!value) {
      setErrorMessage('');
      return;
    }
    if (value < minDate) {
      setErrorMessage('日期不能早于今日');
    } else if (value > maxDate) {
      setErrorMessage('日期不能晚于今日起5年后');
    } else {
      setErrorMessage('');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 提交前二次校验
    if (!selectedDate) {
      setErrorMessage('请选择日期');
      return;
    }
    if (selectedDate < minDate || selectedDate > maxDate) {
      setErrorMessage('日期超出允许范围');
      return;
    }
    // 校验通过，执行提交逻辑
    console.log('提交日期:', selectedDate);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="date"
        value={selectedDate}
        onChange={handleDateChange}
        min={minDate}
        max={maxDate}
      />
      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

export default DatePicker;

这里同时利用input原生min/max限制选择器范围，再配合自定义校验处理手动输入非法日期的情况。

3. React Hook Form 方案（简洁表单校验） #

如果项目使用React Hook Form，可结合校验规则快速实现：

基础校验版 #

import { useForm } from 'react-hook-form';

function RHFDatePicker() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log('提交日期:', data.selectedDate);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="date"
        {...register('selectedDate', {
          required: '请选择日期',
          validate: (value) => {
            if (value < minDate) return '日期不能早于今日';
            if (value > maxDate) return '日期不能晚于今日起5年后';
            return true;
          }
        })}
        min={minDate}
        max={maxDate}
      />
      {errors.selectedDate && <p style={{ color: 'red' }}>{errors.selectedDate.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

export default RHFDatePicker;

Yup Schema校验版（更规范的校验逻辑） #

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

// 定义校验Schema
const dateSchema = yup.object().shape({
  selectedDate: yup.date()
    .required('请选择日期')
    .min(new Date(minDate), '日期不能早于今日')
    .max(new Date(maxDate), '日期不能晚于今日起5年后')
});

function YupDatePicker() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(dateSchema)
  });

  const onSubmit = (data) => {
    console.log('提交日期:', data.selectedDate);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="date"
        {...register('selectedDate')}
        min={minDate}
        max={maxDate}
      />
      {errors.selectedDate && <p style={{ color: 'red' }}>{errors.selectedDate.message}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

注意事项 #

• 格式统一：input[type="date"]的value是YYYY-MM-DD字符串，校验时确保格式一致避免出错
• 时区处理：跨时区场景建议用UTC日期计算，避免本地时间偏差
• 双重校验：原生min/max仅限制选择器，必须配合自定义校验覆盖手动输入的非法情况

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