0

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
pat-och
  • 345
  • 3
  • 17

1 Answers1

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();
Mandeep Jain
  • 2,304
  • 4
  • 22
  • 38
  • thanks a lot mate you make my day,hours not needed are disabled then i ma very interresitng by remoiving them but as i noob with jquery i don't know how to implement $('.ui-timepicker-disabled').remove(); – pat-och Nov 17 '16 at 16:56