Difficulty in using timepicker

Asked

Viewed 283 times

1

I’m having trouble implementing the timepicker in my system.

inserir a descrição da imagem aqui

The user must select a time in a dropdownlist and this time will be used to be the minTime of timepicker. For example, the user selects 01:00:00 and this will be the minTime and by default the maxTime would be 5 hours after the minTime.

At first it works very well, but if the user selects another time, for example 14:00:00, the new durations are not timepicker. I have already used the example of the manufacturer but it did not work, or I did not understand what should be done.

Follows code

.on("change", "#listahorDisp", function () {

    var horaMin = moment($('#listahorDisp :selected').text(), 'HHmmss');
    var horaMax = moment(horaMin).add(5, 'hours').format('hh:mm:ss');
    retornaDuracaoAtendimento(horaMin._i,horaMax);

})

function retornaDuracaoAtendimento(horaMin, horaMax) {

    $('#durationExample').timepicker(
    {
        'timeFormat': 'H:i:s',
        'minTime': horaMin,
        'maxTime' : horaMax,
        'showDuration': true,

    });
}
jquery timepicker

1 answer

0


To make this addition was used the Moment js. to calculate the maximum time and changed the options of the duration box with the Timepicker as follows:

Minimal example:

moment.locale('pt-br');

$(function() {
  jQuery("#timeEnd").timepicker({
    'timeFormat': 'H:i:s',
    'minTime': '00:00:00',
    'maxTime': '05:00:00',
    'showDuration': true
  });
  jQuery("#timeIni").timepicker({
    'timeFormat': 'H:i:s',
    'minTime': '00:00:00',
    'showDuration': true
  }).on('changeTime', function() {
    jQuery("#timeEnd").timepicker('remove');
    var minTime = $(this).val();
    var maxTime = moment(minTime, 'hh:mm:ss')
      .add(5, 'hours')
      .format('hh:mm:ss');
    jQuery("#timeEnd").timepicker({
      'timeFormat': 'H:i:s',
      'minTime': minTime,
      'maxTime': maxTime,
      'showDuration': true
    });
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.timepicker.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/jquery.timepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<div class="row">
  <div class="col-xs-4">
    <input id="timeIni" type="text" class="time form-control" />
  </div>
  <div  class="col-xs-4">
    <input id="timeEnd" type="text" class="time form-control" />
  </div>
</div>

References:

Browser other questions tagged jquery timepicker

You are not signed in. Login or sign up in order to post.