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.

Hypozeuxis

Answer 1

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.

Derogative

Answer 2

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.

Pollywog

This should be marked as the correct answer – Stravinsky

Is there a way to hide the other minutes? Or do a grey out to show it like it has been disabled? using css or anything? – Witness

@Witness you can use timeSteps={{ minutes: 30 }} instead – Smtih

Answer 3

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;
  }}
  {...}
/>

Basanite

Answer 4

The solution from NearHuscarl isn't working for me in the latest MUI V5. A normal javascript Date object isn't working, but with dayjs instead it works.

For DateTime:

<DateTimePicker
          minTime={dayjs().set('hour', 8)}
          maxTime={dayjs().set('hour', 17)}
          />

And for Time as well:

<TimePicker
          minTime={dayjs().set('hour', 8)}
          maxTime={dayjs().set('hour', 17)}
          />

Parados

Answer 5

With latest MUI, a new property timeSteps available with a type { hours?: number, minutes?: number, seconds?: number }.

Example: Following code will only show minute picker with data 0, 15, 30 and 45

<TimePicker
  timeSteps={{ minutes: 15 }}
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Advantage over minutesStep:

minutesStep disables the other minute step. But it will still be displayed in the UI. To get rid of disabled item

Documentation

Winifield