How can i disable many period of time in MUI Time Picker

Question

Now I've been doing a 2 boxes of Time Picker [startTime] -> [endTime] from this i want the time picker can pick only available time with the data like

let times = [
        { startTime: "01:00", endTime: "01:59" }
        { startTime: "03:01", endTime: "08:00" }
    ];

Im using ShouldDisableTime of TimePicker to set disable Time like this

shouldDisableTime={(value, view) => {
                    const hour = value.hour();
                    const minute = value.minute();
                    const disableHour = !rangeHour.some((d) => hour >= d.startTime && hour <= d.endTime);
                    const disableMinute = !rangeMinute.some((d) => minute >= d.startTime && minute <= 59);

                    if (view === 'hours') {
                      return disableHour;
                    } else if (view === 'minutes') {
                      return disableMinute;
                    }
                    
                    const isAllowed =
                      rangeHour.some((d) => hour >= d.startTime && hour <= d.endTime) &&
                      rangeMinute.some((d) => minute >= d.startTime && minute <= 59);

                    return !isAllowed;
                  }}

for the [startTime]

shouldDisableTime={(value, view) => {
                    const hour = value.hour();
                    const minute = value.minute();

                    const disableHour = !rangeHour.some((d) => hour >= d.startTime && hour <= d.endTime);

                    const disableMinute = !rangeMinute.some((d) => minute >= 0 && minute <= d.endTime);

                    if (view === 'hours') {
                      return disableHour;
                    } else if (view === 'minutes') {
                      return disableMinute;
                    }

                    const isAllowed =
                      rangeHour.some((d) => hour >= d.startTime && hour <= d.endTime) &&
                      rangeMinute.some((d) => minute >= 0 && minute <= d.endTime);

                    return !isAllowed;
                  }}

for [endTime]

i've been separate the hour and minute and loop it in the name of rangeHour and rangeMinute.

so the problem I am facing right now is it's can be select incorrect start and end time for example

right now i can select the start and end time like 01:00 - 03:01 which incorrect be cause it's should be able to select for 2 period which is 01:00-01:59 or 03:01-08:00

I've try using maxTime and minTime

[start], minTime={dayjs('01:00' && '03:01', 'HH:mm')}, maxTime={dayjs('01:59' && '08:00', 'HH:mm')}

but it's turn out i able to select only hour 1 and 60 minutes

so i would like to know that is there're any way to prevent from select incorrect time like 01:00 - 03:01 ?

here is my demo of what i said demo

Answer 1

I have created an implementation here. Let me know if it works for you.