jquery-timepicker-addon动态显示使用

文档

需要分条件判断是否显示时间选择,而timepicker是单例模式,
初始化只有第一次生效,要想实时更新需要用到option选项设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// #cond是条件选择select,带.selectDateInput的是两个时间选择输入框
$('#cond').change(function() {
//设置默认显示
var defaultOption = {
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd"
};
//获取分组对应时间(小时),是否显示时间选择
var startHour = 9;
var enableTimePicker = true;
//设置时间控件(防止直接输入时间)
$('.selectDateInput').prop('readonly', 'readonly').val('');
if (!enableTimePicker) { //不允许选择时间
var startOption = {
hour: startHour, //设置初始时间
showHour: false,
showMinute: false,
timeInput: false, //是否允许时间编辑
disabled: false, //是否禁用控件
onSelect: function(selectedDateTime) {
//选中后设置默认初始小时和结束时间(次日24小时后)
selectedDateTime = selectedDateTime.split(' ')[0] + " 00:00:00";
var startDate = (new Date(selectedDateTime));
//setDate设置时间
$(this).datetimepicker('setDate', selectedDateTime + " " + startHour + ":00:00");
startDate.setTime(startDate.getTime() + 1000 * 3600 * (24 + startHour) - 1);
//格式化时间显示
var endDateStr = startDate.toLocaleString('zh-CN', {hour12: false})
.replace(/\//g, '-')
.replace(/\b\d\b/g, '0$&'); //添加前导零
$('.selectDateInput:eq(1)').val(endDateStr);
}
};
$('.selectDateInput:eq(0)').datetimepicker(defaultOption)
.datetimepicker('option', startOption); //option更新(可实时刷新显示)
$('.selectDateInput:eq(1)').datetimepicker()
.datetimepicker('option', {
disabled: true //禁用第二个时间选择输入框
});
} else { //时间选择显示
$('.selectDateInput').datetimepicker(defaultOption)
.datetimepicker('option', {
showHour: true,
showMinute: true,
timeInput: true,
disabled: false,
onSelect: null
});
}
}).trigger('change');

为了实现动态显示折腾了好久,以后查资料还是要多看看官方api和 stackOverFlow 了。

附推荐js正则一篇

如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2016/09/07/how-to-dynamic-show-jquery-timepicker-addon.html