在引导程序 TimePicker 上设置自定义时间

Question

我的页面中有 2 个时间选择器，例如

<div class="form-group">
   <input class="time ui-timepicker-input" id="FromTime" name="FromTime" type="text" value="" autocomplete="off">            
</div>
<div class="form-group">
   <input class="time ui-timepicker-input" id="ToTime" name="FromTime" type="text" value="" autocomplete="off">            
</div>
 $(document).ready(function () {
     $('#ToTime').timepicker();
     $('#FromTime').timepicker();        
 });

现在我想设置ToTime = FromTime + 1 小时

要引发 FromTime 值更改事件，我使用代码

$('#FromTime').timepicker().on('changeTime.timepicker', function(e) {
   //how to get selected time here
   //set ToTime value with a difference of 1 hour ie if 12:30 am selected set ToTime as 1:30 am
}); 

Answer 1

试试这个代码

演示

JS

$(document).ready(function () {
    $('#FromTime').timepicker({
        defaultTime: false
    });
});
var HoursToAdd = 2;
$('#FromTime').timepicker().on('changeTime.timepicker', function (e) {
    var meridian = e.time.meridian
    var hours = e.time.hours
    var minutes = e.time.minutes
    var seconds = e.time.seconds
    var NewTime;
    if (meridian == 'AM') {
        NewTime = new Date('', '', '', hours, minutes, seconds)
    } else if (meridian == 'PM') {
        NewTime = new Date('', '', '', (hours + 12), minutes, seconds)
    }
    NewTime.setHours(NewTime.getHours() + HoursToAdd)
    $('#ToTime').timepicker({
        defaultTime: NewTime.getHours() + " : " + NewTime.getMinutes()
    });
});