Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 599
jasan Avatar asked Nov 29 '22 09:11

jasan


2 Answers

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.

like image 181
misha petriv Avatar answered Dec 01 '22 21:12

misha petriv


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

like image 41
NearHuscarl Avatar answered Dec 01 '22 21:12

NearHuscarl