Disable range of time

[etairi]

I would like to suggest a possible feature for the TimePicker. I would like to have the option to disable hours and minutes like in Material-UI DatePicker with "minDate" and "maxDate" parameters. It would be useful to set the available time range.

For example, <TimePicker from={'9:50'} to={'16:33'} />

[gunn]

A fully flexible approach that works more like DatePicker's shouldDisableDate option:

const allowHours   = ({hours})=> hours >=9 && hours <= 16

const allowMinutes = ({hours, minutes})=> (
  (hours==9 && minutes>=50) ||
  (hours==16 && minutes<=33) ||
  true
)

return <TimePicker allowHours={allowHours} allowMinutes={allowMinutes}/>

Or a better compromise:

const allowedTimes = [{from: '9:50', to: '16:33'}]

return <TimePicker allowedTimes={allowedTimes}/>

[leMaik]

@etairi Good idea! 👍

@gunn Your first option is far too complicated imho, and the second option is just a more complicated way to configure what @etairi suggested. 😉

[gunn]

@leMaik agreed on the first option. The point of the second option is to allow this:

const officeHours = [{from: '9:00', to: '12:00'}, {from: '13:00', to: '17:00'}]
return <TimePicker allowedTimes={officeHours}/>