reactjstimepickermaterial-ui

How can I restrict MUI TimePicker to allow only certain times?


I am current using MUI TimePicker component. I have a use case in which I need to restrict selected time options to at top of the hour(00min) and to at half of hour(30min).Is this possible? I already know I can grab the minutes value after user has selected any minutes and round of to the next hour mark or half hour mark, but I wanted the user To be aware using the UI (time picker) of the limit.


Solution

  • I had a look at the source code and tests and as far as I can tell that's not supported. The logic to determine the hour/minute based on the click coordinates is hardcoded and there are no options to restrict the range.

    As a workaround to restrict the time options you could use a select widget instead, populated with the intervals you care about.