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.

score 23 · Answer 1 · answered Sep 29 '17 at 11:46

23

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.

answered Sep 29 '17 at 11:46

misha petriv

231
2
3

5

This should be marked as the correct answer – Hammersholt Dec 19 '20 at 04:12
2

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? – Kiran Jun 24 '21 at 05:54

score 3 · Answer 2 · answered Oct 21 '21 at 15:53

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

score 1 · Accepted Answer · answered Oct 12 '16 at 09:51

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.

techfreaque · Answer 4 · 2022-10-19T17:00:08.777

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)}
          />

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

4 Answers4