如何在一小时后设置从一个输入到另一个输入的时间？

Question

我有一个表单，当我选择启动时，我想将结束时间设置为一小时。

我试着这样解决：

$('#timepicker2').val($('#timepicker1').val());

但什么都没发生：

时间格式为“HH：mm”

<div class="form-group">
    <label for="exampleInputEmail1"> <?php echo lang('date'); ?></label>

    <input type="text" class="form-control default-date-picker" readonly="" name="date"
           id="exampleInputEmail1" value='' placeholder="">

</div>
<div class="form-group col-md-12">
    <label for="timepicker1"> <?php echo lang('start_time'); ?></label>
    <div class="col-md-4">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small" name="s_time">
            <span class="btn btn-default input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
</div>

<div class="form-group col-md-12">
    <label for="timepicker2"> <?php echo lang('end_time'); ?></label>
    <div class="col-md-4">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker2" type="text" class="form-control input-small" name="e_time">
            <span class="btn btn-default input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
</div>

Answer 1

尝试以下代码，

var firstDate = $("#timepicker1").val();
var hour = oldDate.getHours();
var newDate = firstDate.setHours(hour + 1);
$("#timepicker2").val(newDate);

希望这会有所帮助。

Answer 2

这是Plunker example来自你想要做的事情。

var time1 = document.querySelector('#time1'),
    time2 = document.querySelector('#time2');

time1.addEventListener('change', function(e){
  time2.value = parseInt(time1.value) + 1;
});

根据新问题更新

var time1 = document.querySelector('#time1'),
    time2 = document.querySelector('#time2');

time1.value = '10:00';

time1.addEventListener('change', function(e){
  var t1 = time1.value.split(':').map(Number);

  if(t1[1] < 10) t1[1] = '0' + t1[1];

  t1[0] = (t1[0] + 1)%13;

  if(t1[0] === 0) t1[0] = 1;

  time2.value = t1.join(':');
}); 

这只是一个快速的hacky解决方案，它只是让你知道你能做些什么。显然没有验证。

您应该使用日期对象new Date()它将接受日期字符串作为第一个参数并将其解析为日期。要为您的日期添加一小时

var d = new Date();
d.setHours( d.getHours() + 1);