jQuery Bootstrap Timepicker 开始和结束时间

Question

我有 2 个时间选择器，第一个用于开始时间，第二个用于结束时间。

我希望结束时间不应超过开始时间。我不想设置任何默认值，而且在用户点击开始时间的一开始，结束时间应该填充+2小时。然后用户可以更改结束时间并将其保持为开始时间的最小值但不能低于该时间。

我正在使用 source 中的 Bootstrap 时间选择器

这是我已经解决的:

我在开始时禁用了结束时间。

$('#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}));
});

这在增加时间和第一次点击时不起作用。其中还有很多小问题。

Answer 1

我认为最新版本的日期时间选择器存在一些错误，以下代码使用版本 4.17.37 可以正常工作。

您可以使用useCurrent: false防止默认，同时您可以使用 date()在 end_time 选择器和 minDate() 上设置值设置最小可选值。

您可以简单地使用时刻 add()从您选择的日期起获得+2小时 dp.change监听器。

这里是完整的实时示例:

$('#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>