JQuery Calculo Automatico PHP + BOOTSTRAP (iniciante)

[r.ribeiro]

 

Boa Tarde Amigos (as),

Preciso de uma ajudinha, tenho um form onde cadastro algumas informações e no final tenho o tempo que coloco de inicio e termino gostaria que calcula se e o resultado segui se para o campo seguinte que estará desabilitado para assim salvar no bd.

[RodrigoeKathland Polette]

Basicamente voce vai utilizar JQuery, que é o que o bootstrap utiliza.

voce vai fazer algo como:

A função está em: https://pt.stackoverflow.com/questions/104969/retornar-em-horas-a-diferença-entre-duas-datas-em-javascript

 

function timeDiff(d1, d2) {
    var d1 = new Date(d1).getTime();
    var d2 = d2 || new Date().getTime();
    var df = Math.abs(d1 - d2);
    var td = {
        d: Math.round(df / (24 * 60 * 60 * 1000)), //dias
        h: Math.round(df / (60 * 60 * 1000)), //horas
        m: Math.abs(Math.round(df / (60 * 1000)) - (60 * 1000)), //minutos
        s: Math.abs(Math.round(df / 1000) - 1000)
    };
    var result = '';
    td.d > 0 ? result += td.d + ' dias ' : '';
    td.h > 0 ? result += ('0' + td.h).slice(-2) + ':' : '00:';
    td.m > 0 ? result += ('0' + td.m).slice(-2) + ':' : '00:';
    td.s > 0 ? result += ('0' + td.s).slice(-2) : '00';
    return result;
}

$('#IDcampo1,#IDcampo2').change(function() {
	var campo1 = $('#IDcampo1').val();
	var campo2 = $('#IDcampo2').val();
	$('#campoTotal').val(timeDiff(campo1,campo2));
});

Talvez precise colocar var campo1 = '01/01/1900 ' + $('#IDcampo1').val(); e na linha de baixo também para funcionar...

[r.ribeiro]

Tinha dado uma olhada nesse código mais não funcionou, pensei em ser simples pois é só subtrair o campo (termino - inicio) e o resultado aparecer no campo ( total ) automático apos inserir os dados.

[DiF]

@r.ribeiro Olá,  o código acima não funcionou porque aquela função precisa de uma data junto com as horas.

No seu caso, como quer fazer a diferença pelas horas apenas, o que você pode fazer é usar o ajax e fazer uma requisição assíncrona para uma função em php para calcular a diferença.

 

Eu faria desta maneira:

 

HTML:

<input type="text" name="horaInicial" class="h_inicial" Placeholder="Hora Inicial" />
<input type="text" name="horaFinal" class="h_final" Placeholder="Hora Final" />
<input type="text" class="total" readonly placeholder="Total"/>

 

JQuery:

$(document).ready(function(){
  
   //Armazena o elemento da hora final em uma variável
   var Hfinal = $(".h_final");
   
  //Chama o evento Blur(), ou seja, quando elemento hora final perder o foco( tecla tab)
   Hfinal.on("blur", function(){
     
       //armazena em variáveis os valores dos campos da hora inicial e final
       var HI = $(".h_inicial").val();
       var HF = $(".h_final").val();
     
       //função ajax 
       $.ajax({
                //método de envio
                method: "POST",
           
                //arquivo a ser requisitado
                url: "calculaHoras.php",
         
                //tipo de dado  
                datatype: "HTML", 
         
                //envio dos valores dos campos da hora
                data: { horaInicial: HI, horaFinal: HF }  
                               
       }).done(function(resultado){
         
            //insere o resultado da diferença de horas no campo do total
            $(".total").val(resultado); 
       });
   });
   
});

 

Arquivo calculaHoras.php

<?php

/*
* Função para calcular a diferença 
* entre dois horários
*/
function totalHoras($inicio, $fim){
	
    $horaInicial = new DateTime($inicio);
	$horaFinal   = new DateTime($fim);
	
	$diferenca = $horaInicial->diff($horaFinal);
	
	return $diferenca->format("%H:%I:%S");
}

//Recebe os valores dos campos
$HI = $_POST["horaInicial"];
$HF = $_POST["horaFinal"];

//executa a função
echo totalHoras($HI, $HF);

Os códigos parecem grandes, mas não são.  desconsidere as linhas de comentários que deixei para explicar linha a linha.

 

PS: testei aqui e funciona perfeitamente, toda vez que aperta o TAB depois de alterar o horário no campo da hora final, o campo total atualiza automaticamente.