如何在之前“更改”的结束时间增加2小时开始,使用jQuery时间选择器
How to add 2 hours for end time on previously "changed" start, using jQuery timepicker?
我使用的jQuery时间选择器:http://timepicker.co/
我想要达到的目标:
- 两个时间输入框:开始时间和结束时间。
- 开始时间:8:00am
- 结束时间:当开始时间更改为8:00am时,结束时间应自动设置为10:00am。
$('#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);
});
$('#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" />
我自己找到了答案。
// TimePicker
$('#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 startHour = parseInt($('#t1').val().substring(0, 2));
var startMinutes = $('#t1').val().substring(2, 8);
var endMinTime = (startHour + 2).toString().concat(startMinutes);
$('#t2').timepicker('option', 'minTime', endMinTime);
$('#t2').timepicker('setTime', endMinTime);
});
$('#t2').timepicker({
timeFormat : 'hh:mm a',
interval : 30,
maxTime : '11:00 PM',
startTime : '08:00 AM',
dynamic : false,
dropdown : true,
scrollbar : true
});
相关文章:
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 24小时输入时间:mm格式跨浏览器
- 在ISO转换后,JavaScript时间滞后了一个小时
- 将时间格式更改为24小时格式
- 引导时间选择器在增加或减少小时和分钟的同时获取 NaN
- 日期时间格式增加了一个小时
- 如何将24小时的日期时间格式转换为12小时的格式
- 如何在添加时间值时始终恢复到最长24小时
- 计算JavaScript中的时间差异(天+小时+分钟+秒)
- 时间日志的javascript/jquery验证(5小时3米)
- 如何在jQuery日期时间选择器中添加12小时格式
- 在 javascript 中将 24 小时时间转换为 12 小时,运行秒数
- 如何在 Jquery 或 JavaScript 中验证 24 小时格式化的时间
- Chrome 不允许使用过期时间少于 4 小时的 Cookie
- 用javascript将时间格式化为小时和分钟
- 将时间字符串(例如上午 9:00)转换为 24 小时 (0900)
- 需要在EXTJ的时间字段中显示07:00、15:00、23:00(增加8小时)
- 从带有moment的非本地ISO8601字符串获取时间(小时,分钟)
- 如何保持默认的结束时间从开始时间3小时
- 在当前时间x小时前停止提交表单(javascript/jquery)