我使用的jQuery时间选择器:http://Timepicker.co/
我想达到的目标:
$('#t1').timepicker({
timeFormat : 'hh:mm a',
interval : 30,
minTime : '8',
maxTime : '11:00 PM',
startTime : '08:00 AM',
dynamic : false,
dropdown : true,
scrollbar : true
});
$('#t1')
.timepicker('option', 'change', function(time) {
$('#t2').timepicker('option', 'minTime', time);
$('#t2').timepicker('setTime', time);
});
$('#t2').timepicker({
timeFormat : 'hh:mm a',
interval : 30,
maxTime : '11:00 PM',
startTime : '08:00 AM',
dynamic : false,
dropdown : true,
scrollbar : true
});
所有的工作都很好,除了不确定的方式增加2个小时。
使用传递给#T1
更改处理程序的date
对象(time
);在该时间基础上添加2小时(以毫秒为单位,因此2*60*60*1000
),并创建一个新的date()
对象。在此基础上设置#t2
。
$('#t1')
.timepicker('option', 'change', function(time) {
var later = new Date(time.getTime() + (2 * 60 * 60 * 1000));
$('#t2').timepicker('option', 'minTime', time);
$('#t2').timepicker('setTime', later);
});
null
$('#t1').timepicker({
timeFormat: 'hh:mm a',
interval: 30,
minTime: '8',
maxTime: '11:00 PM',
startTime: '08:00 AM',
dynamic: false,
dropdown: true,
scrollbar: true
});
$('#t1')
.timepicker('option', 'change', function(time) {
var later = new Date(time.getTime() + (2 * 60 * 60 * 1000));
$('#t2').timepicker('option', 'minTime', time);
$('#t2').timepicker('setTime', later);
});
$('#t2').timepicker({
timeFormat: 'hh:mm a',
interval: 30,
maxTime: '11:00 PM',
startTime: '08:00 AM',
dynamic: false,
dropdown: true,
scrollbar: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet" />
<input type="text" id="t1" />
<input type="text" id="t2" />