react-datepicker includeTimes 选项

Question

我想要两个反应日期选择器，一个显示开始时间，另一个显示结束时间。在结束时间选择器中，我想禁用从时间选择器输入 select 之前的时间。

所以如果我 select 从 8:00pm 开始，那么 8:00pm 之前的所有时间都应该被禁用

对于结束时间选择器，我正在执行以下操作

<DatePicker
     selected={this.state.endTime}
     onChange={this.changeEndTime}
     showTimeSelect
     showTimeSelectOnly
     timeIntervals={30}
     timeCaption="Time"
     includeTimes={[
         setHours(setMinutes(new Date(), 0), 17),
         setHours(setMinutes(new Date(), 30), 18),
         setHours(setMinutes(new Date(), 30), 19),
         setHours(setMinutes(new Date(), 30), 17)
     ]}
     className={classes.timer}
     dateFormat="h:mm aa"
 />

但是，时间选择器的下拉列表中的所有时间都被禁用了..请帮助

Answer 1

为什么不使用 minTime 和 maxTime 属性来控制 enabled/disabled 的时间？

换句话说，当您在 FROM TIME 日期选择器中 select 一个类似 2:00pm 的值时，TO TIME 日期选择器 minTime 属性你将设置为 2:30pm.

这可以通过 FROM TIME onChange 事件来处理。您可以创建一个存储最短时间的状态变量，并在 FROM TIME onChange 事件中更新该状态。然后每次值更改时，TO TIME 上的 minTime 属性都会更改。

查看 minTime 和 maxTime 的文档：https://reactdatepicker.com/#example-specific-time-range

Answer 2

我的DatePicker代码

<DatePicker
    selected={this.state.endTime}
    onChange={this.changeEndTime}
    showTimeSelect
    showTimeSelectOnly
    timeIntervals={30}
    timeCaption="Time"
    className={classes.timer}
    dateFormat="h:mm aa"
    minTime={this.endMinDate}
    maxTime={setHours(setMinutes(new Date(), 30), 23)}
/>

*endMinDate 我在函数中计算

setHours 和 setMinutes 工作不正常（setHours() 以某种方式将分钟设置为日期）

最初我是按如下方式导入的

import setHours from "date-fns/setMinutes";
import setMinutes from "date-fns/setMinutes";

然后，我做了以下更改

import {setSeconds, setMinutes} from "date-fns";

所以代码现在可以工作了，虽然我仍然不确定，导入是如何产生影响的

react-datepicker includeTimes 选项

react-datepicker includeTimes option

reactjs

react-datepicker