Question

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

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

我正在使用source

中的bootstrap timepicker

这就是我的成果：

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

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

我认为最新版本的datetimepicker存在一些错误，以下代码使用版本4.17.37正常工作。

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

您只需使用add()时刻即可从dp.change列表器中的所选日期获得 +2 小时。

这是一个完整的实时样本：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

对于谁想做同样的事情但使用新版本的Datetimepicker（TempusDominus Bootstrap 4）的用户您还可以按以下方式处理分钟差异：

 $('#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开始和结束时间

2 个答案: