如何在React JS中使用react-datepicker禁用过去时间

原代码仅排除了当前小时的整点时间，无法完全禁用所有过去的日期和时间。要实现需求，核心是使用minDate属性设置最小可选时间，以下是具体实现方案：

基础实现：禁用所有早于当前时间的选项 #

直接将minDate设置为当前时间，即可自动禁用所有过去的日期和时间：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const currentTime = new Date();

<DatePicker
  selected={startDates}
  onChange={(date) => setStartDates(date)}
  showTimeSelect
  minDate={currentTime}
  dateFormat="MMMM d, yyyy h:mm aa"
/>

进阶：限制时间间隔（可选） #

如果需要限制用户只能选择特定间隔的时间（比如每15分钟一个选项），可以结合minDate和includeTimes生成符合要求的可选时间列表：

import DatePicker from "react-datepicker";
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";
import "react-datepicker/dist/react-datepicker.css";

// 生成从当前时间开始，每15分钟间隔的当天可选时间
const generateAvailableTimes = () => {
  const times = [];
  let current = new Date();
  // 设置当天的最晚可选时间，比如23:45
  const endTime = setHours(setMinutes(new Date(), 45), 23);
  
  while (current <= endTime) {
    times.push(new Date(current));
    current.setMinutes(current.getMinutes() + 15);
  }
  return times;
};

<DatePicker
  selected={startDates}
  onChange={(date) => setStartDates(date)}
  showTimeSelect
  minDate={new Date()}
  includeTimes={generateAvailableTimes()}
  dateFormat="MMMM d, yyyy h:mm aa"
/>

原代码问题说明 #

你之前的excludeTimes配置仅排除了当前小时的0分这个单一时间点，并没有对更早的日期、小时或其他分钟选项做限制，因此无法实现“禁用所有过去时间”的需求。

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