I want to remove minutes value that is not divisible by 15 in Material Ui TimePicker component.
I am trying this approach but this is not working
const shouldDisableTime = (timeValue) => {
const minutes = timeValue?.$m;
return minutes !== 0 && minutes !== 15 && minutes !== 30 && minutes !== 45;
};
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
value={time}
onChange={(newValue) => setTime(newValue)}
minutesStep={15}
shouldDisableTime={shouldDisableTime}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
Instead of disabling time with shouldDisableTime()
function you can use minutesStep={15}
prop and for hiding not necessary minutes you can use skipDisabled
boolean property with setting value to true.
Full <TimePicker />
component API can be found here.
See example screenshot bellow.