如何为之前“更改"的结束时间添加 2 小时开始，使用 jQuery 时间选择器? [英] How to add 2 hours for end time on previously "changed" start, using jQuery timepicker?

问题描述

我使用的 jQuery Timepicker:http://timepicker.co/

The jQuery Timepicker I use: http://timepicker.co/

我想要达到的目标:

• 两个时间输入框:开始时间和结束时间.
• 开始时间:上午 8:00.
• 结束时间:更改开始时间并设置为上午 8:00 时，结束时间应自动设置为上午 10:00.

$('#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 小时的方式.

Everything works well now except the unsettled way to add the 2 hours.

推荐答案

使用传递给#t1的Date对象(time)更改处理程序；将该时间添加 2 小时(以毫秒为单位，所以 2 * 60 * 60 * 1000)，并创建一个新的 Date() 对象.根据那个设置#t2.

Use the Date object (time) passed to the #t1 change handler; add 2 hours to that time (in milliseconds, so 2 * 60 * 60 * 1000), and create a new Date() object. Set #t2 based on that.

$('#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" />

这篇关于如何为之前“更改"的结束时间添加 2 小时开始，使用 jQuery 时间选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！