如何使用React Datepicker从指定日期中排除未来日期？

嘿，我来帮你搞定这个需求！其实要实现排除所有未来日期，有两种可行的方式，其中第一种是最直接、性能最优的方案：

方案1：用maxDate属性（强烈推荐） #

这是React Datepicker官方设计用来限制可选日期范围的属性，比用excludeDates生成一堆未来日期要高效太多。你只需要把maxDate设置为今天的日期，所有未来的日期就会自动被禁用，根本不需要手动去排除每一个日期。

直接上代码：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

function DatePickerComponent() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      // 把最大可选日期设为今天，自动禁用所有未来日期
      maxDate={moment().toDate()}
    />
  );
}

export default DatePickerComponent;

小提醒：React Datepicker接受的是原生JavaScript的Date对象，所以我们用moment().toDate()把Moment实例转成原生Date对象，这样组件才能正确识别。

方案2：用excludeDates属性（仅作参考，不推荐） #

如果你因为某些特殊原因一定要用excludeDates来实现，那你需要生成一个包含所有未来日期的数组。不过要注意，未来日期是无限的，所以我们得设定一个合理的截止范围（比如未来100年），然后生成这个范围内的所有日期：

示例代码如下：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

// 生成从明天到未来100年的所有日期数组
const getFutureDates = () => {
  const futureDates = [];
  let currentDate = moment().add(1, 'days'); // 从明天开始
  const endDate = moment().add(100, 'years'); // 截止到100年后

  while (currentDate.isBefore(endDate)) {
    futureDates.push(currentDate.toDate());
    currentDate = currentDate.add(1, 'days');
  }

  return futureDates;
};

function DatePickerComponent() {
  const [selectedDate, setSelectedDate] = useState(null);
  const futureDates = getFutureDates();

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      excludeDates={futureDates}
    />
  );
}

export default DatePickerComponent;

注意：这种方式需要生成大量的Date对象，会占用更多内存，对于性能来说不是最优解，所以优先选方案1哦。

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