jquery-ui-timepicker - custom dropdown with 2 different time range (for morning and afternoon)

Question

i have to customize jquery-ui-timepicker from https://github.com/jonthornton/jquery-timepicker

The goal is to introduce a break into a specific time range:

my initial code here

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

this code produce a dropdown list like that:

10:00

11:00

...

21:00

22:00

but i have to display e.g.

10:00

11:00

12:00

13:00

14:00 <--- last hour of the first range

18:00 <--- first hour of the second range

19:00

...

22:00

I have no idea how to do that. At the moment I am trying to create an array with the needed hours and inject in the timepicker but I don't know if thats possible. If there's better solution, let me know.

Answer 1

You can use the '#disableTimeRangesExample' from the examples to disable certain times.

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

If you dont want to show the disabled options, you can either hide or remove them using jquery.

This is a markup for a disabled option

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

You can either hide it

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

or remove it

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