时间戳

首页 > 解决方案 > react-datepicker includeTimes 选项

reactjs - react-datepicker includeTimes 选项

问题描述

我想要两个 react-datepicker，一个显示开始时间，另一个显示结束时间。在结束时间选择器中，我想禁用从时间选择器中选择的时间之前的时间。

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

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

<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"
 />

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

标签： reactjsreact-datepicker

解决方案

为什么不使用minTimeandmaxTime属性来控制启用/禁用的时间？

换句话说，当您在FROM TIME日期选择器中选择像下午 2:00 这样的值时，TO TIME日期选择器minTime属性将设置为下午 2:30。

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

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

推荐阅读