jQuery Bootstrap Timepicker start and end time

Question

I have 2 timepickers where the first one is for start time and the second one is for end time.

I want that the end time should not exceed the start time. I don't want any default value to be set, also at the very beginning when the user clicks on the start time, the end time should be populated with +2 hours. And then the user can change the end time and can keep it to the minimum of the start time but not below that.

I am using bootstrap timepicker from source

This is what I have worked out:

I disable the end time in the beginning.

$('#end_time_input').prop('disabled', true);
$('#start_time').datetimepicker({
    format: 'HH:mm',
    useCurrent: false,
});

$('#end_time').datetimepicker({
    format: 'HH:mm',
});
$("#start_time").on("dp.change", function (e) {
    $('#end_time_input').prop('disabled', false);
    var date = e.date;
    var d1 = new Date();
    d1.setHours(+date._d.getHours()+2 ); 
    d1.setMinutes(date._d.getMinutes());
    $("#heure_de_rdv_end_input").val(d1.getHours()+":"+d1.getMinutes());
    var start_date = e.date;
    var start_hours = date._d.getHours();
    var start_mins = date._d.getMinutes();
    $('#end_time').data("DateTimePicker").minDate(moment({h:start_hours,m :start_mins}));
});

This doesn't work when increasing the time and also on the first click. Also there are many minor issues in it.

score 0 · Answer 1 · answered Apr 25 '18 at 22:19

I think there are some bugs with the lastest version of the datetimepicker, the following code works fine using version 4.17.37.

You can use useCurrent: false to prevent defaults, while you can use date() to set value on the end_time picker and minDate() to set minimum selectable value.

You can simply use moment add() to get +2 hours from the selected date in you dp.change listner.

Here a full live sample:

$('#end_time_input').prop('disabled', true);
$('#start_time').datetimepicker({
  format: 'HH:mm',
  useCurrent: false,
});

$('#end_time').datetimepicker({
  format: 'HH:mm',
  useCurrent: false,
});

$("#start_time").on("dp.change", function (e) {
  $('#end_time_input').prop('disabled', false);
  if( e.date ){
    $('#end_time').data("DateTimePicker").date(e.date.add(2, 'h'));
  }
  
  $('#end_time').data("DateTimePicker").minDate(e.date);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id="start_time">
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

<div class='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id="end_time">
      <input type='text' class="form-control" id="end_time_input"/>
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

This works pretty fine, but there are a few issues, when I start my start time downwards, i.e. from 23, 22.. it doesn't maintain a gap of 2 hours with the end time, works fine when I am increasing the time upwards, i.e 1,2.. Also I want the gap of 2 hours only when I am changing the start time, if i am editing the end time, the gap between the two can be 1 hour or even no gap, i.e. if start time is 23:00, the initial end time will be 1:00 but the end time can be as min as 23:00 and not 1:00 — , Apr 26 '18 at 12:20

score 0 · Answer 2 · answered Jun 09 '20 at 02:31

For who want to do the same thing but with new version Datetimepicker (TempusDominus Bootstrap 4) You can also do with Minutes difference as follow:

 $('#id_startTime').datetimepicker({
      format: 'LT'
  });
$('#id_endTime').datetimepicker({
      format: 'LT'
  });


//::Time Condition
$('#id_startTime').on("change.datetimepicker", function (e) {
    if(e.date){
        $('#id_endTime').datetimepicker(e.date.add(15, 'm'));
    }
    $('#id_endTime').datetimepicker('minDate', e.date)
});

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="row">
  <div class="col-sm-6">
      <div class="form-group">
          <div class="input-group date" id="id_startTime" data-target-input="nearest">
              <input type="text" class="form-control datetimepicker-input" data-target="#id_startTime"/>
              <div class="input-group-append" data-target="#id_startTime" data-toggle="datetimepicker">
                  <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-sm-6">
      <div class="form-group">
          <div class="input-group date" id="id_endTime" data-target-input="nearest">
              <input type="text" class="form-control datetimepicker-input" data-target="#id_endTime"/>
              <div class="input-group-append" data-target="#id_endTime" data-toggle="datetimepicker">
                  <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
              </div>
          </div>
      </div>
  </div>
</div>

jQuery Bootstrap Timepicker start and end time

2 Answers2