如何在 MUI 时间选择器中禁用多个时间段

Question

现在我已经做了 2 盒时间选择器 [startTime] -> [endTime] 由此，我希望时间选择器只能选择具有类似数据的可用时间

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

我使用 TimePicker 的 ShouldDisableTime 来设置禁用时间，如下所示

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;
                  }}

对于[开始时间]

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;
                  }}

[结束时间]

我已经将小时和分钟分开，并以 rangeHour 和 rangeMinute 的名称循环它。

所以我现在面临的问题是可以选择不正确的开始和结束时间

现在我可以选择开始和结束时间，例如01:00 - 03:01，这是不正确的，因为它应该能够选择2个时段，即01:00-01:59或03:01-08 :00

我尝试使用 maxTime 和 minTime

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

但结果我只能选择 1 小时和 60 分钟

所以我想知道有什么方法可以防止选择错误的时间，例如 01:00 - 03:01 ？

Answer 1

我已经在here创建了一个实现。让我知道它是否适合您。