Add hours with jQuery in real time

Navigation
1

Hello, I have 3 input that receives hours and minutes of a timepicker : 

<input type="text" id="seg1" onBlur="calcular">
<input type="text" id="seg2" onBlur="calcular">
<input type="text" id="seg">

The first one receives (08:30), the second receives (10:30) and the third one returns (02:00).

I use the function below for real numbers in real time: 

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

But I'm not able to make a small (or large) code that works to return the value (02:00) in hours and minutes in real time.

    
asked by anonymous 29.10.2017 / 20:38

3 answers

4

You have to make more than parseInt because hh:mm have to be transformed in minutes, ie the part of the hours has to be multiplied by 60 minutes, etc.

Suggestion: 

function hmToMins(str) {
  const [hh, mm] = str.split(':').map(nr => Number(nr) || 0);
  return hh * 60 + mm;
}

function calcular() {
  const segent = hmToMins(document.getElementById('segent').value);
  const segsai = hmToMins(document.getElementById('segsai').value);
  const diff = segsai - segent;
  if (isNaN(diff)) return;
  const hhmm = [
      Math.floor(diff / 60), 
      Math.round(diff % 60)
  ].map(nr => '00${nr}'.slice(-2)).join(':');
  
  document.getElementById('resultseg').value = hhmm;
}

calcular(); // só para o exemplo mostrar mais rápido
<input type="text" id="segent" oninput="calcular()" value="08:30">
<input type="text" id="segsai" oninput="calcular()" value="10:30">
<input type="text" id="resultseg">
    
29.10.2017 / 20:46
0

An alternative to the @Sergio answer using some jQuery: 

function calcular(){
	var c1 = $("#seg1").val().split(':').map(Number);
	var c2 = $("#seg2").val().split(':').map(Number);
	var dif = (c2[0]*60+c2[1])-(c1[0]*60+c1[1]);
	var MM = dif%60;MM.toString().length==1?MM="0"+MM:0;
	if(isNaN(dif)) return;
	var resultado = Math.floor((dif)/60) +":"+ MM;
	$("#seg").val(resultado);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" id="seg1" oninput="calcular()" value="08:30" />
<input type="text" id="seg2" oninput="calcular()" value="10:30" />
<input type="text" id="seg" />
    
29.10.2017 / 22:24
0

Function to perform the calculation 

var calc_times = {
    sign: ''
    , value: []
    , convert: function(  data ){
        var c = String( data ).split(':').map(Number);
        var r = 0;
        if( c[0] == undefined ){
            c[0] = 0;
        }
        r += ( Math.abs(c[0]) * 60 * 60 ) ;
        if( c[1] == undefined ){
            c[1] = 0;
        }
        r += ( Math.abs(c[1]) * 60 ) ;
        if( c[2] == undefined ){
            c[2] = 0;
        }
        r += Math.abs(c[2]) ;
        if( String( data ).indexOf("-") == 0 ){
            r = r * ( -1 ) ;
        }
        calc_times.value.push( r );
    }
    , calc: function(){
        var sec = 0 ;
        calc_times.value.forEach(function(i,o){
            sec += i ;
        })
        if( sec < 0 ){
            calc_times.sign = "-" ;
        }
        return calc_times.sign + [
            Math.abs(sec) / 60 / 60, // horas
            (Math.abs(sec) / 60) % 60, // minutos
            Math.abs(sec) % 60 // segundos
        ].map(Math.floor).map(
            s => (s < 10) ? '0' + s : s
        ).join(':');
    }
};

Informs the values you want to calculate 

calc_times.convert('-00:09:01');
calc_times.convert('00:00:03');
calc_times.convert('-00:00:01');

Call to Answer 

calc_times.calc();
    
29.06.2018 / 21:52
String to Double - Help! Interfaces can be instantiated?