如何在react-datepicker中设置最大1年且不超当前日期的日期范围

要同时实现日期跨度不超过1年和结束日期不晚于当前日期，你需要将结束日期的maxDate设置为「开始日期加1年」和「当前日期」两者中的较小值，而非仅取前者。

实现思路 #

• 明确两个限制边界：
  1. 基于开始日期的1年后日期：addYears(new Date(date.start_at), 1)（需引入date-fns的addYears）
  2. 当前日期的起始时间：startOfDay(new Date())（避免时间部分干扰选择逻辑）
• 取这两个日期的最小值，作为结束日期选择器的maxDate参数

代码示例（基于date-fns） #

import { addYears, startOfDay, min } from 'date-fns';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  // 计算结束日期的最大允许值
  const maxEndDate = startDate 
    ? min([addYears(startDate, 1), startOfDay(new Date())])
    : startOfDay(new Date()); // 未选开始日期时，结束日期最多选当天

  return (
    <div className="date-range">
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        maxDate={startOfDay(new Date())} // 开始日期也禁止选未来
        placeholderText="选择开始日期"
      />
      <DatePicker
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        minDate={startDate} // 结束日期不能早于开始日期
        maxDate={maxEndDate}
        placeholderText="选择结束日期"
      />
    </div>
  );
};

原生Date替代方案（无需第三方库） #

如果不想用日期工具库，可通过原生Date API实现相同逻辑：

// 计算开始日期加1年
const getYearLater = (date) => {
  const yearLater = new Date(date);
  yearLater.setFullYear(yearLater.getFullYear() + 1);
  return yearLater;
};

// 获取当天起始时间
const getTodayStart = () => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return today;
};

// 取两个日期的较小值
const getMinDate = (dateA, dateB) => {
  return dateA.getTime() < dateB.getTime() ? dateA : dateB;
};

// 组件内使用
const maxEndDate = startDate 
  ? getMinDate(getYearLater(startDate), getTodayStart())
  : getTodayStart();

额外提示 #

• 建议给开始日期也添加maxDate限制，避免用户选择未来的开始日期
• 处理日期时统一使用起始时间（0点），可避免因时间戳差异导致的逻辑错误

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