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();