tengo este guion
<script> function calculaDiferenca(data_inicio, data_fim) { var date1 = new Date(data_inicio); var date2 = new Date(data_fim); var timeDiff = Math.abs(date2.getTime() - date1.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); alert(diffDays + ' dias'); } (function() { var calcBtn = document.getElementById('calcular'); calcBtn.addEventListener('click', function(){ var data_inicio = document.getElementById('data_inicio').value; var data_fim = document.getElementById('data_fim').value; calculaDiferenca(data_inicio, data_fim); }); })(); </script>¿Puedo cambiar en lugar de hacer clic en el botón para calcular cuándo se completan la fecha 1 y la fecha 2 para hacer el cálculo?
var calcBtn = document.getElementById('calcular');La respuesta de @Khalil es buena. Solo quiero agregar algo para que el proceso sea secuencial.
Desactive el campo date2. Como:
<input type="date" id="data_fim" disabled/>Luego hazlo dependiente de date1.
let first = document.getElementById('data_inicio'); let last = document.getElementById('data_fim'); first.addEventListener('change', (e) => { last.disabled = false calculaDiferenca(e.target.value, last.value) }) last.addEventListener('change', (e) => { calculaDiferenca(first.value, e.target.value) })Puede escuchar el evento de change en los campos de entrada e invocar la función de cálculo.
let first = document.getElementById('data_inicio'); let last = document.getElementById('data_fim'); first.addEventListener('change', (e) => { calculaDiferenca(e.target.value, last.value) }) last.addEventListener('change', (e) => { calculaDiferenca(first.value, e.target.value) })Y aquí hay un fragmento de trabajo:
function calculaDiferenca(ev) { var date1 = new Date(ini.value); var date2 = new Date(fim.value); var timeDiff = Math.abs(date2.getTime() - date1.getTime()); var diffDays = Math.ceil(timeDiff/(1000*3600*24)); dif.textContent=diffDays+' dia'+(diffDays===1?'':'s'); } const [ini,fim,dif] = "data_inicio,data_fim,dif".split(",").map(t=>document.getElementById(t)); [ini,fim].forEach(e=>e.addEventListener("input",calculaDiferenca)); <input type="date" id="data_inicio" placeholder="inicio"> <input type="date" id="data_fim" placeholder="fim"><br> <p>Diferenca: <span id="dif"></span></p>