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

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

Answer 1

您可以使用 examples 中的“#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();