Search code examples
reactjsreact-datepicker

react-datepicker includeTimes option

I want two react-datepicker with one showing start time and another showing end time. In end-time picker, I want to disable the times before the time selected in from time picker.

So if I select from time as 8:00pm, then all the time before 8:00pm shuld be disabled

for End time picker,i am doing the following 

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

But, all the times are disabled in the drop down of time picker..Please help

Solution

  • Why not instead use the minTime and maxTime properties to manipulate what times are enabled/disabled?

    In other words, when you select a value like 2:00pm in the FROM TIME date picker, the TO TIME date picker minTime property you will set to 2:30pm.

    This can be handled with the FROM TIME onChange event. You can create a state variable where you store minimum time, and update that state in the FROM TIME onChange event. Then every time the value changes the minTime property on the TO TIME will change.

    See their documentation with minTime and maxTime: https://reactdatepicker.com/#example-specific-time-range