jQuery timepicker with multi-input input function

0

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

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 jQuery code:

$(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)
      );

    }
  });
});

You have several issues.

The first is that the code got extremely large !! This is Monday, I copied it 7 days a week.

The second is that I need to make a calculation for the fifth input (result), second example:

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 big if applied every day of the week.

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

The third is that I need it to return the value in the input automatic result when filling in 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 to it, and I can not figure it out.

Thank you!

    
asked by anonymous 29.07.2017 / 05:51

0 answers