1

Tenho dois input com jQuery que carrega um intervalo de horários de 30 em 30 minutos. O primeiro é o horário de entrada, o segundo é o de saída.

$(function() {
  $('.timepicker').timepicker({
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: true
    });
  });

Queria saber como cria uma função dentro do código do jQuery ("minTime:") para que seja impossível colocar horário de saída antes do horário de entrada.

Site feito em PHP.

2 Respostas 2

2

Pela documentação você pode usar o método change pra modificar outro input quando o atual for modificado, usando a notação de option. Veja um exemplo:

$(function() {

  $('.timepicker-saida').timepicker({
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: true
  });
    
  $('.timepicker-entrada').timepicker({
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    change: function(time) {
      var element = $(this), text;
      var timepicker = element.timepicker();
          
      $('.timepicker-saida').timepicker(
      'option',
      'minTime',
      timepicker.format(time)
      );
         
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">


<input type="text" class="timepicker-entrada" />
<input type="text" class="timepicker-saida" />

2
  • muito obrigado! era exatamente isso que eu precisava.. só que tem um detalhe que eu achei desnecessário falar, porem não é.. eu tenho entrada e saída todos os dias da semana.. eu tenho que copiar esse código 7 vezes? existe uma maneira de associar o input de entrada e saída de cada dia? (os input estão todos dentro de um table) 28/07/2017 às 17:00
  • @ThiagoKoller os seletores são jQuery comum então basta vc fazer de uma forma que o script saiba a qual input atrelar. Por exemplo, se ambos estão dentro da mesma linha tr da tabela, você pode fazer algo tipo $(this).parents('tr').find('.timepicker-saida').timepicker('option', 'minTime', // etc). Isso te dá mais flexibilidade. Se precisar de mais detalhes, abra outra pergunta com esse tema específico. 28/07/2017 às 17:17
1

Eu faria da seguinte forma. A partir do código que você já tem, e com a suposição de que os inputs têm por id entrada e saida:

var entrada = $("#entrada"), saida = $("#saida");
var validarIntervalo = function () {
    if (entrada.timepicker("getTime") < saida.timepicker("getTime")) {
        // A hora de entrada está menor que a hora de saída.
        // Você pode disparar um erro ou realizar outra ação aqui
    }
}

$(function() {
    $('.timepicker').timepicker({
        interval: 30,
        minTime: '7',
        maxTime: '18',
        dynamic: false,
        dropdown: true,
        scrollbar: true
    }).on("change", validarIntervalo); // Associa a função criada acima ao evento change.
});

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 .