React-datepicker minTime 和 maxTime 不起作用

Question

我的表单上有 DatePicker；

我正在使用这个包：[ https://reactdatepicker.com/#example-specific-time-range][1]

在选择开始日期上：我想禁用当前时间之前的所有时间。那么如果现在是凌晨 3 点。之前的时间（凌晨 2 点、凌晨 1 点、中午 12 点）将被禁用。

通常，它是这样的：但是这里他们写的是静态时间，我想在那里添加当前时间的当前小时。

<DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      minTime={setHours(setMinutes(new Date(), 0), 17)}
      maxTime={setHours(setMinutes(new Date(), 30), 20)}
      dateFormat="MMMM d, yyyy h:mm aa"
    />

所以我看到了一些关于这个的例子并尝试了这个：

const now = moment().toDate();

<DatePicker
                    selected={this.state.startDate}
                    onChange={event => this.getStartDate(event)}
                    showTimeSelect
                    timeFormat="haa"
                    timeIntervals={60}
                    minDate={now}
                    minTime={now.hours(now.hour()).minutes(now.minutes())}
                    maxTime={now.hours(23).minutes(45)}
                    dateFormat="MM/d/yyyy hhaa"
                    timeCaption="Hour"
                  />

但什么也没发生。我哪里出错了？

Answer 1

使用 prop 过滤过去的时间对我有用filterTime。这是文档中片段的链接：

https://reactdatepicker.com/#example-filter-times

本质上，这就是您需要做的：

() => {
  const [startDate, setStartDate] = useState(null);
  
  const filterPassedTime = (time) => {
    const currentDate = new Date();
    const selectedDate = new Date(time);

    return currentDate.getTime() < selectedDate.getTime();
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      filterTime={filterPassedTime}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

您也不需要使用任何外部库，例如date-fns