CODEWITHSUNDEEP
reactjstimepickermaterial-ui
jasan
jasan

Reputation: 12987

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.

Upvotes: 7

Views: 22901

Answers (6)

Whyashh
Whyashh

Reputation: 93

With the current version of Material UI Date Time picker v7.20.0, there is a prop skipDisabled which doesn't show disabled options in the UI

Before:

without skipDisabled

After:

after skipDisabled

Documentation

Upvotes: 0

Anand
Anand

Reputation: 5332

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

Upvotes: 1

techfreaque
techfreaque

Reputation: 21

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

Upvotes: 2

NearHuscarl
NearHuscarl

Reputation: 81833

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

Codesandbox Demo

Upvotes: 4

misha petriv
misha petriv

Reputation: 241

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.

Upvotes: 24

fabio.sussetto
fabio.sussetto

Reputation: 7065

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.

Upvotes: 1

Related Questions