Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
r.ribeiro

JQuery Calculo Automatico PHP + BOOTSTRAP (iniciante)

Recommended Posts

r.ribeiro    0

 

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.

CALCULO.jpg

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

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...

Editado por RodrigoeKathland Polette

Compartilhar este post


Link para o post
Compartilhar em outros sites
r.ribeiro    0
  • Autor do tópico
  • 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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.722

    @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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×