javascript - jquery-ui-timepicker - 具有 2 个不同时间范围的自定义下拉列表（上午和下午）

Question

我必须从https://github.com/jonthornton/jquery-timepicker自定义 jquery-ui-timepicker

目标是在特定时间范围内引入中断：

我的初始代码在这里

jQuery(".my_time_field").timepicker({
    "minTime": "10:00",
    "maxTime": "22:00",
    "disableTextInput": "true",
    "disableTouchKeyboard": "true",
    "scrollDefault": "now",
    "step": "60",
    "selectOnBlur": "true",
    "timeFormat": "H:i"
});

此代码生成一个下拉列表，如下所示：

10:00

11:00

...

21:00

22:00

但我必须显示例如

10:00

11:00

12:00

13:00

14:00 <--- 第一个范围的最后一个小时

18:00 <--- 第二范围的第一个小时

19:00

...

22:00

我不知道该怎么做。目前我正在尝试创建一个具有所需小时数的数组并注入时间选择器，但我不知道这是否可能。如果有更好的解决方案，请告诉我。

Answer 1

您可以使用示例中的“#disableTimeRangesExample”来禁用某些时间。

$('#disableTimeRangesExample').timepicker({
    'disableTimeRanges': [
        ['1am', '2am'],
        ['3am', '4:01am']
    ]
});

如果您不想显示禁用的选项，可以使用 jquery 隐藏或删除它们。

这是禁用选项的标记

<li class="ui-timepicker-am ui-timepicker-disabled ui-timepicker-selected">1:00am</li>

你可以隐藏它

$('.ui-timepicker-disabled').css('display', 'none');

或删除它

$('.ui-timepicker-disabled').remove();