jQuery Bootstrap Timepicker время начала и окончания - PullRequest
Новая
       24

jQuery Bootstrap Timepicker время начала и окончания

0 голосов
/ 25 апреля 2018

У меня есть 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}));
});

Это не работает при увеличении времени, а также при первом нажатии. Также есть много мелких проблем.

1 Ответ

0 голосов
/ 26 апреля 2018

Я думаю, что есть некоторые ошибки в самой последней версии datetimepicker, следующий код отлично работает с использованием версии 4.17.37.

Вы можете использовать useCurrent: false для предотвращения значений по умолчанию, в то время как вы можете использовать date() для установки значения на end_time и minDate() установить минимальное выбираемое значение.

Вы можете просто использовать момент add(), чтобы получить + 2 часов с выбранной вами даты dp.change listner.

Вот полный живой пример: 

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