Difficulty in using timepicker

Question

Difficulty in using timepicker

Navigation

#1 by (0 votes)

1

I'm having a hard time implementing timepicker on my system.

TheusermustselectatimeinadropdownlistandthistimewillbeusedtobetheminTimeof timepicker . For example, the user selects 01:00:00 and this will be minTime and by default maxTime would be 5 hours after minTime . >

At first it works great, but if the user selects another time, for example 14:00:00 , the new durations are not by the timepicker . I already used the manufacturer's example but it did not work, or I did not quite understand what should be done.

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

asked by anonymous 28.08.2017 / 02:27

1 answer

Low performance in RecyclerView with ConstraintLayout, within a ViewPager on Android With knockoutjs make a CheckBox with Radiobutton behavior

score 0 · Accepted Answer

To make this addition, we used Moment.js to calculate the maximum times and changed the options in the duration box to Timepicker as follows:

Minimum 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><scriptsrc="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><linkhref="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><scriptsrc="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>