如何修改Airbnb DateRangePicker以允许选择过去日期作为起始日期？

嘿，这个问题其实很好解决，react-dates的DateRangePicker里有两个关键属性控制可选日期范围，咱们一步步来调整：

核心思路 #

默认情况下，如果你的代码限制了不能选当前日期之前的日期，大概率是设置了minDate属性为当前日期，或者自定义了isOutsideRange函数过滤掉了过去的日期。咱们针对这两种情况分别处理：

情况1：调整minDate属性 #

minDate定义了用户能选择的最早日期。如果之前你设置了minDate={moment()}（当前日期），那自然无法选择之前的日期。你可以：

• 直接移除minDate属性：这样就允许选择所有历史日期
• 设置一个更早的日期作为最小可选值：比如允许选择最近50年的日期，就写minDate={moment().subtract(50, 'years')}

举个代码修改的例子：

修改前（限制只能选今天及以后）

import { DateRangePicker } from 'react-dates';
import moment from 'moment';

// 你的组件代码
function MyDatePicker() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      startDateId="start-date"
      endDate={endDate}
      endDateId="end-date"
      onDatesChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
      }}
      focusedInput={focusedInput}
      onFocusChange={setFocusedInput}
      minDate={moment()} // 这里限制了最早只能选今天
    />
  );
}

修改后（允许选择过去日期）

import { DateRangePicker } from 'react-dates';
import moment from 'moment';

function MyDatePicker() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      startDateId="start-date"
      endDate={endDate}
      endDateId="end-date"
      onDatesChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
      }}
      focusedInput={focusedInput}
      onFocusChange={setFocusedInput}
      // 移除minDate，或者设置更早的日期
      minDate={moment().subtract(100, 'years')} // 允许选100年内的所有日期
    />
  );
}

情况2：检查并修改isOutsideRange函数 #

如果你自定义了isOutsideRange函数，用来判断某个日期是否不可选，那也要检查这个函数的逻辑。比如之前可能写了这样的代码：

const isOutsideRange = (day) => day.isBefore(moment(), 'day'); // 今天之前的日期都不可选

要允许选择过去日期的话，你可以：

• 直接移除isOutsideRange属性：使用默认逻辑
• 修改函数逻辑，比如只限制过于久远的日期：

const isOutsideRange = (day) => day.isBefore(moment().subtract(100, 'years'), 'day');

总结 #

优先检查minDate和isOutsideRange这两个属性，调整其中的日期限制逻辑，就能实现允许选择当前日期之前的起始日期啦。

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