Countdown of days passed from a given date, using the <form>

Question

I wish someone would help me with this script.

As in the image, I need to take the date I will insert in the blanks and count how many days have passed until such a day.

Could someone help me with this?

Answer 1

It seems to me that the date input format is MM/DD/YYYY, and the final date would be the current date. Therefore the current date must be formatted for MM/DD/YYYY so that proper calculations can be made.

When calculations between dates are required, remember the javascript lingua franca: milliseconds.

In order to make calculations between dates, we use getTime() which returns the number of milliseconds between midnight on January 1, 1970 and the date provided.

Then you just make a difference.

function calc() {
	//pega o valor (data) digitada no campo (input) de id=dataInicial
    var inicial = document.getElementById("dataInicial").value;
	var DataDesde = new Date(inicial);
	
	var date = new Date();
	//data atual formatada para MM/DD/AAAA
    DataHoje = new Date(((date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear()));
	
	var difTempo = Math.abs(DataHoje.getTime() - DataDesde.getTime());
	var difDias = Math.ceil(difTempo / (1000 * 3600 * 24)); 
	
	document.getElementById('dias').value = difDias;
	
	document.getElementById("resultado").className="show";
	
}

function esc() {
	document.getElementById("resultado").className="hide";
}

	.hide{
		display:none;
	}
	.show{
		display:block;
	}

<form action="javascript:void(0);">
Entre com o formato da data MM/DD/AAAA<br>
Data: <input type="text" id="dataInicial"><br>
<div id="resultado" class="hide">
Transcorridos <input type="text" id="dias" size="3"> dias.<br>
</div>
<input type="reset" value="Limpar" onclick="esc()"> <input type="submit" onclick="calc()" value="Calcular">
</form>

Answer 2

I think you understand the purpose of the site.

Anyway, your problem is very simple and can be solved with few lines of code.

I haven’t done everything for you because, as already said, this is not the purpose of the site, but here’s a basic idea of how it can be done.

Subtracting a date from another date returns a numerical value, this value corresponds to the amount of milliseconds passed between the first date and the second. So, having this amount in hand, it is only necessary to use a little the good old basic mathematics to obtain the amount of days elapsed between these two dates.

const txtData = document.getElementById('data');
const txtDias = document.getElementById('dias');
const btComparar = document.getElementById('comparar');
btComparar.addEventListener('click', buttonClick);

function buttonClick(){
  var dtTarget = new Date(txtData.value);

  var diff = diferencaEmDias(new Date(), dtTarget);
  console.log(diff);
  
  txtDias.value = diff;
}

function diferencaEmDias(dataPrincipal, dataSecundaria) {
  return Math.round((dataPrincipal - dataSecundaria)/(1000*60*60*24)) - 1;
}

Data: <input type="date" id="data" />
Dias: <input type="text" id="dias" />

<button id="comparar"> Comparar </button>