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.
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.
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;
}}
{...}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With