jquery time Picker, create function for "min time"

Asked

Viewed 214 times

1

I have two input with jQuery which loads a time interval of 30 minutes every 30 minutes. The first is the check-in time, the second is the check-out time.

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

I wanted to know how to create a function inside the jQuery code ("minTime:") so that it is impossible to put exit time before the input time.

Site made in PHP.

php jquery function timepicker

2 answers

2

For documentation you can use the method change to modify another input when the current one is modified, using the option. Take an example:

$(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" />

  • thank you very much! that’s exactly what I needed.. Only there’s one detail that I found unnecessary to say, but it’s not.. i have input and output every day of the week.. do I have to copy that code 7 times? there is a way to associate the input and output of each day? (the input is all within a table)

  • @Thiagokoller selectors are ordinary jQuery so you just have to do it in a way that the script knows which input to link to. For example, if both are within the same line tr table, you can do something like $(this).parents('tr').find('.timepicker-saida').timepicker('option', 'minTime', // etc). This gives you more flexibility. If you need more details, open another question with this specific theme.

1

I would do as follows. From the code you already have, and with the assumption that inputs have to id entree and exit:

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.
});

Browser other questions tagged php jquery function timepicker

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