1

Estou tendo dificuldade em implementar o timepicker no meu sistema.

inserir a descrição da imagem aqui

O usuário deve selecionar um horário em uma dropdownlist e este horário será utilizado para ser o minTime do timepicker. Por exemplo, o usuário seleciona 01:00:00 e este será o minTime e por padrão o maxTime seria 5 horas depois do minTime.

De primeira funciona muito bem, porém se o usuário selecionar outro horário, por exemplo 14:00:00, as novas durações não são pelo timepicker. Já utilizei o exemplo do fabricante porém não funcionou, ou não entendi bem o que deve ser feito.

Segue código

.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,

    });
}
0

1 Resposta 1

0

Para fazer essa adição foi utilizado o Moment.js para calcular as hora máxima e alterado as opções da caixa de duração com o Timepicker da seguinte forma:

Exemplo minimo:

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>

Referencias:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .