提问者:小点点

如何使用jQuery Timepicker为先前“更改”的开始添加2小时的结束时间?


我使用的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个小时。


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

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" />