3

Quero fazer um calculador de diferença entre datas. Um que dê para fazer uma diferença em dias, horas, etc.

Exemplo: Inicial - 17/07/2019 para Final - 29/07/2020. Quanto tempo (em dias) é da data inicial para a data final? E quantas horas?

Estou com o seguinte código:

    //CALCULAR DIAS

        function CalcDias(){
                var data1 = new Date(document.getElementById("data1").value);
                var data2 = new Date(document.getElementById("data2").value);
                return parseInt((data1 - data2) / (24 * 3600 * 1000));
        }

    //CALCULAR HORAS

        function CalcHoras(){
                var data1 = new Date(document.getElementById("data1").value);
                var data2 = new Date(document.getElementById("data2").value);
                return parseInt((data1 - data2) / (24 * 3600 * 1000));
        }

    //CALCULAR SEGUNDOS

       function CalcSegundos(){
                var data1 = new Date(document.getElementById("data1").value);
               var data2 = new Date(document.getElementById("data2").value);
                return parseInt((data1 - data2) / (24 * 3600 * 1000));
        }

    //MOSTRAR RESULTADOS

        function result(){
        if(document.getElementById("data1")){
            document.getElementById("result_dias").value=CalcDias();
            document.getElementById("result_horas").value=CalcHoras();
            document.getElementById("result_segundos").value=CalcSegundos();

        }  
    }
<body>
    <div id="reserve_form">

    <div id="pickup_date"><p><label class="form">Primeira data:</label><input type="date" class="textbox" id="data2" name="data_2" onchange="result()"/></p></div>

    <div id="dropoff_date"><p><label class="form">Segunda data:</label><input type="date" class="textbox" id="data1" name="data_1" onchange="result()"/></p></div>

    <div id="numdays"><label class="form">Diferença em Dias:</label><input type="text" class="textbox" id="result_dias" name="dias"/></div>
    <br/>
    </div>
</body>

Eu só coloquei os valores "horas e segundos" para demonstrar como eu quero, porém apenas a quantidade de dias funciona.

Teria um jeito de realizar um código parecido com esse de dias para um de HORAS/SEGUNDOS/MESES/ANOS?

3
  • Oi @Danna. Vi que voce é uma usuária nova aqui, recomendo que veja os seguintes links antes: Tour StackOverflow e Help StackOverflow, pois nesses links, explicam como é o ambiente aqui e também como fazer perguntas no Stack Overflow. Porque aqui nao criamos código e entregamos para as pessoas que pedem e sim ajudamos com dúvidas em códigos das pessoas que fazem as perguntas. Commented 19/07/2019 às 18:35
  • Óh sim, me perdoe. Não soube explicar muito bem! Eu até tenho um código montado, seria um problema se eu editasse a pergunta e mostrasse o meu código? assim eu poderia pedir auxilio de um jeito mais fácil.
    – Danna
    Commented 19/07/2019 às 20:43
  • Veja o conceito de dia juliano e aí basta fazer a diferença. É como a maioria dos softwares faz.
    – anonimo
    Commented 19/07/2019 às 21:54

2 Respostas 2

2

Como você está usando campos input type="date", quer dizer que eles só possuem o dia, mês e ano, sem nenhuma informação sobre o horário. Então não vejo como calcular a diferença em horas, a menos que você assuma que uma diferença de X dias é o equivalente a X * 24 horas (e nesse caso, considera-se que estamos comparando o mesmo horário dos dois dias).

De qualquer forma, o valor de um input type="date" é sempre retornado como uma string no formato "yyyy-mm-dd" (também conhecido como formato ISO 8601). E quando você cria um Date passando uma string neste formato, ela é interpretada como sendo aquela data, à meia-noite, em UTC. Ou seja, as datas criadas estão no mesmo horário.

E quando você subtrai duas instâncias de Date, o resultado é a diferença entre elas, em milissegundos. Como nesse caso as duas datas possuem o mesmo horário (e ainda é referente ao UTC, que não possui anomalias como o horário de verão, que poderiam interferir nos resultados), é seguro assumir que este valor da diferença é múltiplo de 24 horas.

Por isso, para calcular a diferença em segundos, basta dividir este valor por 1000. Para obter a diferença em minutos, divida por (1000 * 60), e assim por diante:

// diferença em milissegundos
function diffMs(data1, data2) {
    return data2 - data1;
}

// diferença em segundos
function diffSecs(data1, data2) {
    return diffMs(data1, data2) / 1000;
}

// diferença em minutos
function diffMins(data1, data2) {
    return diffSecs(data1, data2) / 60;
}

// diferença em horas
function diffHoras(data1, data2) {
    return diffMins(data1, data2) / 60;
}

// diferença em dias
function diffDias(data1, data2) {
    return diffHoras(data1, data2) / 24;
}


function calcula(sel) {
    let data1 = document.getElementById('data1').value;
    let data2 = document.getElementById('data2').value;
    if (data1 && data2) { // se os 2 campos estão preenchidos
        let op = sel.options[sel.selectedIndex];
        let d1 = new Date(data1);
        let d2 = new Date(data2);
        let diff;
        switch (op.value) {
            case 'ms':
                diff = diffMs(d1, d2);
                break;
            case 's':
                diff = diffSecs(d1, d2);
                break;
            case 'm':
                diff = diffMins(d1, d2);
                break;
            case 'h':
                diff = diffHoras(d1, d2);
                break;
            case 'd':
                diff = diffDias(d1, d2);
                break;
        }
        if (diff !== undefined) {
            document.getElementById('resultado').innerHTML = `${diff} ${op.text}`;
        }         
    }
}
<form>
  <p><label class="form">Primeira data:</label><input type="date" class="textbox" id="data1" name="data1" /></p>
  <p><label class="form">Segunda data:</label><input type="date" class="textbox" id="data2" name="data2" /></p>
  <p>Escolha o cálculo:
    <select onchange="calcula(this)">
      <option value="">escolha</option>
      <option value="ms">milissegundos</option>
      <option value="s">segundos</option>
      <option value="m">minutos</option>
      <option value="h">horas</option>
      <option value="d">dias</option>
    </select>
  </p>
  <p>Diferença: <span id="resultado"></span></p>
</form>


Diferença em meses e anos

Esse cálculo já é um pouco mais complicado, como já explicado aqui. Muitos podem sugerir apenas para pegar a diferença em dias e dividir por 30 (ou por 365.25 / 12, ou por qualquer outro valor médio arbitrário), e em seguida arredondar o resultado. Mas esses valores só te darão aproximações, e estão sujeitos a muitos erros.

Usando os exemplos do link acima citado, entre 01/01/2019 e 01/02/2019 há 31 dias. Dividindo por 30 e arredondando, dá 1 mês.

Mas entre 01/02/2019 e 01/03/2019 há 28 dias. Dividindo por 30, dá 0,93: se arredondar pra baixo, dá zero meses. Mas entre 1 de fevereiro e 1 de março a diferença não é de um mês? Então devemos arredondar pra cima nesse caso?

Mas e se fosse entre 01/01/2019 e 29/01/2019, a diferença também é de 28 dias. Só que entre 1 de janeiro e 29 de janeiro ainda não se passou 1 mês, então eu não posso arredondar pra cima nesse caso. "Ah, então eu só arredondo pra cima se não estiver no mesmo mês".

Aí você vê que entre 01/01/2019 e 27/02/2019 a diferença é de 57 dias, que dividido por 30 dá 1,9. Se arredondar pra cima dá 2, mas entre 1 de janeiro e 27 de fevereiro ainda não se passaram dois meses. E agora?

Dividir por 30 (ou por qualquer outro valor "médio" arbitrário) sempre terá esse problema. Isso acontece porque meses têm tamanhos variados (podem ter 28, 29, 30 ou 31 dias) e a quantidade exata de meses equivalente aos dias vai depender das datas envolvidas. O mesmo vale para anos, pois eles podem ter 365 ou 366 dias, e a quantidade exata de anos também depende das datas envolvidas.

Sendo assim, uma alternativa seria usar o mesmo algoritmo sugerido da resposta supracitada:

function ajustaMesAno(date) {
    return date.getUTCFullYear() * 12 + date.getUTCMonth();
}

function diffMeses(data1, data2) {
    return ajustaMesAno(data2) - ajustaMesAno(data1);
}

O código acima desconsidera o dia do mês (ou seja, a diferença entre qualquer data em janeiro e qualquer data em fevereiro é 1 mês). Mas você também pode considerar que, se a data inicial é 10/01/2019, então até o dia 09/02/2019 ainda não completou 1 mês (somente a partir de 10/02 é que podemos considerar que já se passou 1 mês). Nesse caso, o código ficaria:

function diffMeses(data1, data2) {
    let meses = ajustaMesAno(data2) - ajustaMesAno(data1);
    if (data1.getUTCDate() > data2.getUTCDate()) {
        meses--;
    }
    return meses;
}

Qual dos dois é o correto? Depende de como você quer calcular essa diferença. Não existe uma regra "oficial" para fazer esses cálculos, como existe na matemática. O que existem são implementações diferentes, e algumas são mais "aceitas", mas tudo depende de cada caso. Aritmética de datas não é nada óbvia, e há vários casos bem estranhos e contra-intuitivos.

E quanto aos anos? Podemos pegar a diferença em meses e dividir por 12:

function diffAnos(data1, data2){
    return diffMeses(data1, data2) / 12;
}

Se vamos levar em conta o dia do mês ou não, isso é definido pela implementação que escolhemos para diffMeses. Se quiser, ainda pode arredondar o resultado como bem entender. Fica o seu critério.

E há ainda o caso de 29 de fevereiro.

Se alguém nasceu em 29/02/2000, em 28/02/2001 podemos considerar que a pessoa já fez 1 ano? Afinal, ainda falta um dia para o aniversário - só que o dia seguinte é 1 de março, então como faz? Novamente, não há uma regra oficial para isso: algumas APIs consideram que o resultado é zero anos, outras consideram que é 1. Cabe a você escolher como vai tratar esses casos.

Enfim, aritmética de datas não é tão simples assim, quando você começa a pensar nos detalhes. Não é à toa que há tantas APIs diferentes para trabalhar com datas, cada uma adotando abordagens diferentes, e muitas estão longe de serem consideradas bem sucedidas. De qualquer forma, a ideia "básica" foi dada...


Moment.js

Se quiser, pode usar o Moment.js, que possui o método diff, muito melhor para trabalhar com datas:

function calcula(sel) {
    let data1 = document.getElementById('data1').value;
    let data2 = document.getElementById('data2').value;
    if (data1 && data2) { // se os 2 campos estão preenchidos
        let op = sel.options[sel.selectedIndex];
        let d1 = moment(data1);
        let d2 = moment(data2);
        let diff;
        switch (op.value) {
            case 'ms': // milissegundos, usar o método normal
                diff = d2 - d1;
                break;
            default: // para todos os outros casos, usar o moment
                if (op.value) {
                    diff = d2.diff(d1, op.value);
                }
        }
        if (diff !== undefined) {
            document.getElementById('resultado').innerHTML = `${diff} ${op.text}`;
        }         
    }
}
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<form>
  <p><label class="form">Primeira data:</label><input type="date" class="textbox" id="data1" name="data1" /></p>
  <p><label class="form">Segunda data:</label><input type="date" class="textbox" id="data2" name="data2" /></p>
  <p>Escolha o cálculo:
    <select onchange="calcula(this)">
      <option value="">escolha</option>
      <option value="ms">milissegundos</option>
      <option value="seconds">segundos</option>
      <option value="minutes">minutos</option>
      <option value="hours">horas</option>
      <option value="days">dias</option>
      <option value="months">meses</option>
      <option value="years">anos</option>
    </select>
  </p>
  <p>Diferença: <span id="resultado"></span></p>
</form>

2
  • 1
    Muito obrigada pela ajuda! Me ajudou a compreender mais sobre o conteúdo em si e agora pude conseguir concluir uma parte do meu projeto. Muito obrigada mesmo! De coração.
    – Danna
    Commented 20/07/2019 às 3:03
  • @Danna Fiz uma correção na função diffMeses, tinha invertido a ordem das datas...
    – hkotsubo
    Commented 20/07/2019 às 9:57
0

Pega o resultado da subtração das duas, em milissegundos, e divide pelo valor que tu quer.
exemplo:

var horas = Math.abs(data1 - data2) / (60*60*1000);

obs: Obviamente, dependendo de como tu configurou os campos de entrada, isso poderá te retornar um número decimal. Tu terás que decidir se quer pegar somente a parte inteira ou arredondar.

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