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

Question

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.

Answer 1

Property minutesStep of material-ui TimePicker component describe how many minutes should be added/subtracted when moving the clock pointer. In your case use value of 30.

Answer 2

In MUI v5, There is a TimePicker component in the lab package. You can use minTime/maxTime props to restrict the hours that can be selected. The example below sets the min time to 8 AM and max time to 6:45 PM:

<TimePicker
  minTime={new Date(0, 0, 0, 8)}
  maxTime={new Date(0, 0, 0, 18, 45)}
  {...}
/>

If you want to restrict the minute unit you can add a shouldDisableTime callback, the example below only allows the user to choose from 16 to 59 minutes:

<TimePicker
  shouldDisableTime={(timeValue, clockType) => {
    return clockType === "minutes" && timeValue <= 15;
  }}
  {...}
/>