2

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

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

我正在使用来自源的引导时间选择器

这是我制定的：

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

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

当增加时间和第一次点击时，这不起作用。里面还有很多小问题。

4

2 回答 2

0

对于想要使用新版本 Datetimepicker (TempusDominus Bootstrap 4) 做同样事情的人，您也可以使用 Minutes 差异，如下所示：

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

于 2020-06-09T02:31:13.200 回答
0

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

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

您可以简单地使用时刻从您的列表中选择的日期add()获得+2dp.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>

于 2018-04-25T22:19:38.457 回答