jQuery timepicker with various input function

Asked

Viewed 95 times

0

I have a code in jQuery that uses the timepicker in all 35 input. follows below the second:

Below my HTML:

    <table>
        <tr>
            <th height="40">Indicador</th>
            <th>Segunda</th>
            <th>Terça</th>
            <th>Quarta</th>
            <th>Quinta</th>
            <th>Sexta</th>
            <th>Sábado</th>
            <th>Domingo</th>
        </tr>
        <tr>
            <th align="right">Entrada</th>
            <td><input type="text" id="segent" maxlength="5" class="timepicker-entrada ded"></td>
            <td><input type="text" id="terent" maxlength="5" class="timepicker-saida ded"></td>
            <td><input type="text" id="quaent" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quient" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sexent" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sabent" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="doment" maxlength="5" class="timepicker ded"></td>
        </tr>
        <tr>
            <th align="right">Saida</th>
            <td><input type="text" id="segsai" maxlength="5" class="timepicker-saida ded"></td>
            <td><input type="text" id="tersai" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quasai" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quisai" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sexsai" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sabsai" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="domsai" maxlength="5" class="timepicker ded"></td>
        </tr>
        <tr>
            <th align="right">Entrada</th>
            <td><input type="text" id="segent2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="terent2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quaent2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quient2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sexent2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sabent2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="doment2" maxlength="5" class="timepicker ded"></td>
        </tr>
        <tr>
            <th align="right">Saida</th>
            <td><input type="text" id="segsai2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="tersai2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quasai2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="quisai2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sexsai2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="sabsai2" maxlength="5" class="timepicker ded"></td>
            <td><input type="text" id="domsai2" maxlength="5" class="timepicker ded"></td>
        </tr>
        <tr>
            <th align="right">Resultado</th>
            <td><input type="time" id="resultseg" class="ded" readonly></td>
            <td><input type="text" id="resultter" class="ded" readonly></td>
            <td><input type="text" id="resultqua" class="ded" readonly></td>
            <td><input type="text" id="resultqui" class="ded" readonly></td>
            <td><input type="text" id="resultsex" class="ded" readonly></td>
            <td><input type="text" id="resultsab" class="ded" readonly></td>
            <td><input type="text" id="resultdom" class="ded" readonly></td>
        </tr>
    </table>

Below the code of jQuery:

$(function() {

  $('#segsai2').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: false,
  });

  $('#segent2').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: false,
      change: function(time) {
      var element = $(this), text;
      var timepicker = element.timepicker();
      $('#segsai2').timepicker(
      'option',
      'minTime',
      timepicker.format(time)
      );    
    }
  });

  $('#segsai').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: false,
    change: function(time) {
      var element = $(this), text;
      var timepicker = element.timepicker();
      $('#segent2').timepicker(
      'option',
      'minTime',
      timepicker.format(time)
      );
    }
  });

  $('#segent').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '7',
    maxTime: '18',
    dynamic: false,
    dropdown: true,
    scrollbar: false,
    change: function(time) {
      var element = $(this), text;
      var timepicker = element.timepicker();
      $('#segsai').timepicker(
      'option',
      'minTime',
      timepicker.format(time)
      );

    }
  });
});

Has several problems.

The first is that the code became extremely large!! This is the second, I copied it for 7 days of the week.

The second is that I need him to calculate for the fifth input (result), example of second:

var calc = document.getElementById('calcular');
calc.onclick = function(){
    var segent = parseInt(document.getElementById('segent').value, 10);
    var segsai = parseInt(document.getElementById('segsai').value, 10);
    var segent = parseInt(document.getElementById('segent2').value, 10);
    var segsai = parseInt(document.getElementById('segsai2').value, 10);
    document.getElementById('resultseg').value = (segsai - segent) + (segsai2 - segent2);
}

It also gets very large if applied to every day of the week.

(segsai - segent)+(segsai2 - segent2), and that he did not let you enter the output time greater than the input time or type output without the input being filled in, because the jQuery timepicker code shows the possible ones, but if I type an invalid value, it goes in anyway.

The third is that I need it to return the value in the automatic result input when filling the output, like this: (if value less than or equal to 4 returns value 1, if value greater than 4 and less than or equal to 8 returns 2, if greater than or equal to 8 returns 3).

I’m starting to study jQuery and javascript, but I’m still very new, and I’m not getting around to it.

Thank you!

  • Attention that has a " the most in the first Exit in the first <input> in class="timepicker-saida ded"". All this logic made by id will never be scalable in size. You will have to do it by classes.

  • agreed, I used id, because I did a "gambiarra" to be able to work because I couldn’t make the system understand that I want to add up between the first <td> of the first <tr> with the first <td> of the second <tr> and so on..

No answers

Browser other questions tagged

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