How do I manipulate values of type type in my JS?

0

I need to do a calculation with time type input values in my JS using jquery, how do I do this? is there a library ready?

<label for="">Inicio</label>
<div class="form-group">
    <input type="time" class="form-control" id="inicio">
</div>

<label for="">Fim</label>
<div class="form-group">
    <input type="time" class="form-control" id="fim">
</div>

$(function() {
    $('#calcular').click(function(){

        var inicio = $('#inicio').val();
        var fim = $('#fim').val();
        var ciclo = $('#ciclo').val();


    });

});
    
asked by anonymous 28.03.2018 / 20:03

1 answer

0

$('#btnSoma').click(function(){

    var inicio = $('#inicio').val();
    var iniSplit = inicio.split(':');
    var inic1 = iniSplit[0];
    var inic2 = iniSplit[1];
    var fim = $('#fim').val();
    var fimSplit = fim.split(':');
    var fim1 = fimSplit[0];
    var fim2 = fimSplit[1];
    var ciclo = $('#ciclo');

    var somaInicio = Number(inic1) + Number(fim1);
    var somaFim = Number(inic2) + Number(fim2);
    var soma = somaInicio+ ' : ' +somaFim;
        
    ciclo.val(soma);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><labelfor="">Inicio</label>
<div class="form-group">
    <input type="time" class="form-control" id="inicio">
</div>

<label for="">Fim</label>
<div class="form-group">
    <input type="time" class="form-control" id="fim">
</div>

<label for="">Ciclo</label>
<div class="form-group">
    <input type="text" class="form-control" id="ciclo">
    <button type="button" id="btnSoma">Somar</button>
</div>
    
28.03.2018 / 21:14