时间戳

首页 > 解决方案 > React-datepicker minTime 和 maxTime 不起作用

javascript - React-datepicker minTime 和 maxTime 不起作用

问题描述

我的表单上有 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"
                  />

但什么也没发生。我在哪里犯了错误？

标签： javascriptreactjsmomentjsreact-datepicker

解决方案

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

推荐阅读