如何使用 jQuery 时间选择器为之前 "changed" 开始的结束时间增加 2 小时？

Question

我使用的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 小时的不确定方式外，现在一切正常。

Answer 1

使用传递给 #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" />

Answer 2

我自己找到了答案。效果很好：

// 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
                    });

如何使用 jQuery 时间选择器为之前 "changed" 开始的结束时间增加 2 小时？

How to add 2 hours for end time on previously "changed" start, using jQuery timepicker?

javascript

time

jquery

timepicker