Tengo un formulario para la reserva de hotel. Solo necesito validar la fecha de entrada y la fecha de salida, tampoco busques todo un motor de reservas.
Tengo 2 campos de fecha de entrada, uno para CHECKIN, el otro para CHECKOUT. La fecha mínima de CHECKIN debe ser 2 días posteriores al día actual, y la fecha mínima de CHECKOUT, 3 días posteriores al día actual.
Hice dos bloques de javascript, uno para la fecha de CHECKIN y otro para el CHECKOUT. Según noté que el bloque de script CHECKOUT funciona, pero no el primero, cambié los nombres de las variables para el segundo bloque y todavía funciona. La fecha de entrada para el pago está bien establecida.
Cada bloque tiene un objetivo de ID diferente para cada uno de los campos (checkin y checkout). Me gustaría saber por qué un bloque anula al otro y no quiero permitir que el usuario seleccione una fecha de salida anterior a la fecha de entrada, lo que sería un absurdo.
Aquí está mi código:
<input type="date" id="checkIn" name="checkIn" required> <input type="date" id="checkOut" name="checkOut" required> <!--Scripts for CHECKIN date--> <script> function formatISOLocal(d) { let z = n => ('0' + n).slice(-2); return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + z(d.getDate()); } window.onload = function() { let inp = document.querySelector('#checkIn'); let d = new Date(); d.setDate(d.getDate() + 2); /*Minimum date for CHECKIN*/ inp.min = formatISOLocal(d); inp.defaultValue = inp.min; d.setMonth(d.getMonth() + 3); inp.max = formatISOLocal(d); } </script> <!--Scripts for CHECKOUT date--> <script> function formatISOLocal1(e) { let a = o => ('0' + o).slice(-2); return e.getFullYear() + '-' + a(e.getMonth()+1) + '-' + a(e.getDate()); } window.onload = function() { let out = document.querySelector('#checkOut'); let e = new Date(); e.setDate(e.getDate() + 3); /*Minimum date for CHECKOUT*/ out.min = formatISOLocal1(e); out.defaultValue = out.min; e.setMonth(e.getMonth() + 4); out.max = formatISOLocal1(e); } </script>También comparto mi codepen . Orientaciones, por favor.
Haga un script que establezca el mínimo de la segunda fecha a la primera fecha
<input type="date" id="a"> From<br> <input type="date" id="b"> To var a = document.getElementById("a"); var b = document.getElementById("b"); a.addEventListener("input", function() { b.min = a.value; }); a.min = new Date().getFullYear()+"-"+new Date().getDate()+"-"+(new Date().getMonth()+1);