Remove minutes value that is not divisible by 15 in Material Ui TimePicker component

Question

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>

Answer 1

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.