1

Bom, a minha dúvida é a seguinte, eu tenho um formulário com 2 inputs, ou seja para as pessoas colocarem 2 datas em cada. Se seguida tenho um javascript que calcula a diferença entre as 2 datas.

Eu gostaria de saber como faria, para que sem a pessoa dar submit no formulário, assim que acabasse de preencher o formulário aparecesse um alert dizendo que a diferença das suas datas era 'x'.

Ou seja em tempo real, sem precisar de clicar em submit, que o javascript me desse o valor da variável diferença com um alert.

4
  • isso é relativamente simples... quando deve aparecer o alert? quando fazes focusout do input? ou quando clicas em submit, antes de enviar o form? e que valores queres como resposta? dias, horas?
    – Sergio
    Commented 7/07/2015 às 16:36
  • 2
    O título deveria ser mais esclarecedor, na minha opnião Commented 7/07/2015 às 16:37
  • Sergio, queria que quando fizesse focusout, aparecesse logo um alert da minha variavel diferença.
    – Gonçalo
    Commented 7/07/2015 às 16:42
  • Em que formato são inseridas as datas?
    – Sergio
    Commented 7/07/2015 às 16:43

4 Respostas 4

2

O input tem um evento chamado onkeyup, que é quando o usuário "solta" a tecla. Daí você vai verificando se ele já terminou de digitar. Por exemplo, se a data for no formato "dd/mm/aaaa", verifica se o value do input x já tem tamanho 10.

Usando jquery:

$("#target").keyup(function() {
    var valor = $(this).val().length;
    if (valor === 10){
    // ...
    }
});
1

Fala brother,

Acho que jQuery te ajudaria muito nesse caso:

Caso você queira que o submit seja ativado ao focus sair do seu campo:

$("#seuCampo").blur(function(){
    alert(Sua função com o retorno do valor);
});

Agora caso você queira que ao terminar de escrever a data a função seja chamada, imaginando que sua data siga o padrão mm/dd/aaaa tente isso:

$('#seuCampo').change(function(){
   if($('#seuCampo').val().length === 10){
      alert(Sua função com o retorno do valor);
   }
});

Você talvez precise fazer validações para ver se os dois campos foram preenchidos.

Espero ter ajudado.

Abraços

1
  • Amigo, não é bem isso que eu quero, eu não quero dar submit, eu quero que quando eu tiro o mouse de cima apareca a diferença sem dar o submit etende?
    – Gonçalo
    Commented 7/07/2015 às 17:00
1

Me baseando nessa resposta do @Bacco, pode usar o atributo onchange do campo pra fazer essa verificação.

function funcao(data){
  var dtInicio = document.getElementById('data1');
  var dtFim = document.getElementById('data2');

  if(dtInicio.value.length > 0 && dtFim.value.length > 0){

    dtInicio = dtInicio.value.split("/");
    dtFim = dtFim.value.split("/")
    data1 = new Date(dtInicio[2] + "/" + dtInicio[1] + "/" + dtInicio[0]);
    data2 = new Date(dtFim[2] + "/" + dtFim[1] + "/" + dtFim[0]);

    var total = dateDiferencaEmDias(data1, data2);
    
    if(isNaN(total)){
      alert("Data inserida invalida!");
    }else{
      alert("total de: " + total + " dias");
    }
  }
}

function dateDiferencaEmDias(a, b) {
  var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
  var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
    
  return Math.floor((utc2 - utc1) / ( 1000 * 60 * 60 * 24) );
}
Digite uma data de inicio: <input type='text' id='data1' onchange='funcao(this.value)'><br/>
Digite outra data final: <input type='text' id='data2' onchange='funcao(this.value)'>

Obs: não sou um adepto do uso do Jquery quando não ha a necessidade do mesmo...

Update respondendo a duvida do autor da pergunta

Você pode usar o campo date sem nenhum problema, e só trocar o type='text' por type='date'.

Não importa onde você chama o código JavaScript, lembrando sempre que você deve respeitar os padrões de escrita HTML.

Um exemplo do código completo pra você ter uma ideia de como você pode montar:

<html>
  <head>
    <script>
      function funcao(data){
        var dtInicio = document.getElementById('data1');
        var dtFim = document.getElementById('data2');

        if(dtInicio.value.length > 0 && dtFim.value.length > 0){

          dtInicio = dtInicio.value.split("/");
          dtFim = dtFim.value.split("/")
          data1 = new Date(dtInicio[2] + "/" + dtInicio[1] + "/" + dtInicio[0]);
          data2 = new Date(dtFim[2] + "/" + dtFim[1] + "/" + dtFim[0]);

          var total = dateDiferencaEmDias(data1, data2);

          if(isNaN(total)){
            alert("Data inserida invalida!");
          }else{
            alert("total de: " + total + " dias");
          }
        }
      }

      function dateDiferencaEmDias(a, b) {
        var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
        var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());

        return Math.floor((utc2 - utc1) / ( 1000 * 60 * 60 * 24) );
      }
    </script>
  </head>
  <body>
    <form>
      Digite uma data de inicio: <input type='date' id='data1' onchange='funcao(this.value)'><br/>
      Digite outra data final: <input type='date' id='data2' onchange='funcao(this.value)'>
    </form>
  </body>
</html>
2
  • Boa Noite, no caso colocaria o form antes ou depois do código javascript? Lembrando que os meus inputs não são text mas sim date!
    – Gonçalo
    Commented 7/07/2015 às 20:36
  • @Gonçalo montei o código pra você ter uma ideia de como você pode fazer Commented 7/07/2015 às 20:48
0

Você não precisa mais ficar observando eventos, deixe o Angular.js cuidar disso.

Para lidar com as datas, use o Moment.js; dá pra fazer sem, mas para que perder seus cabelos tão jovem, não é mesmo?

Veja um exemplo funcionando: http://codepen.io/edinella/pen/GJxaVz?editors=101

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .