jQuery Bootstrap Timepicker 开始和结束时间

Posted 2023-04-12

【中文标题】jQuery Bootstrap Timepicker 开始和结束时间

【英文标题】：jQuery Bootstrap Timepicker start and end time

【发布时间】：2018-10-05 13:22:53

【问题描述】：

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

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

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

这是我研究出来的：

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

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

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

【参考方案1】：

对于想要做同样事情但使用新版本 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>

【参考方案2】：

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

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

您可以简单地使用时刻 add() 从您的dp.change 列表中获得从所选日期起+2 小时。

这是一个完整的现场样本：

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

【讨论】：

这工作得很好，但是有一些问题，当我开始我的开始时间向下时，即从 23、22 开始，它不会与结束时间保持 2 小时的差距，当我向上增加时间（即 1,2甚至没有间隔，即如果开始时间是 23:00，则初始结束时间将为 1:00，但结束时间可以最小为 23:00 而不是 1:00