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>