在引导时间选择器上设置自定义时间

Set custom time on bootstrap TimePicker

本文关键字：时间 设置 自定义 选择器      更新时间：2023-09-26

我的页面有两个时间选择器，如

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

试试这个代码

演示

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()
    });
});
相关文章：