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 eg
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.
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.