jquery-timepicker-Github-Issue

by Bhupesh Kushwaha

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<script src="http://jonthornton.github.io/jquery-timepicker/lib/datepair.js"></script>
<link rel="stylesheet" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<div class="container">
<span class="datepair">
    <!--START TIME-->
    <div class="form-group inline-datetime">
        <input id="meeting-start-time" type="text" class="time start form-control" placeholder="Start Time">        
    </div>
    <div class="form-group">
        &nbsp;to&nbsp;
    </div>
    <!--END TIME-->
    <div class="form-group inline-datetime">
        <input id="meeting-end-time" type="text" class="time end form-control" placeholder="End Time">
    </div>
</span>

</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

$('#meeting-start-time').timepicker({
    'scrollDefaultNow': 'true',
        'closeOnWindowScroll': 'true',
        'showDuration': true
}).on('changeTime', function(){
    var new_end = $(this).timepicker('getTime');
    new_end.setHours(new_end.getHours()+1);
    $('#meeting-end-time').timepicker('setTime', new_end);
    $('#meeting-end-time').focus();
});

$('#meeting-end-time').timepicker({
    'scrollDefaultNow': 'true',
        'closeOnWindowScroll': 'true',
        'showDuration': true
});