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