[英]jquery-ui-timepicker - custom dropdown with 2 different time range (for morning and afternoon)
i have to customize jquery-ui-timepicker from https://github.com/jonthornton/jquery-timepicker 我必须从https://github.com/jonthornton/jquery-timepicker自定义jquery-ui-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 10:00
11:00 11:00
... ...
21:00 21:00
22:00 22:00
but i have to display eg 但是我必须显示例如
10:00 10:00
11:00 11:00
12:00 12:00
13:00 13:00
14:00 <--- last hour of the first range 14:00 <---第一个范围的最后一小时
18:00 <--- first hour of the second range 18:00 <---第二范围的第一小时
19:00 19:00
... ...
22: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”禁用某些时间。
$('#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. 如果您不想显示禁用的选项,则可以使用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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.