Tengo un formulario de reserva para hotel con 2 campos de fecha: uno para la entrada (CHECKIN) y otro para la salida (CHECKOUT). Hice dos bloques de javascript de CASI el mismo código; lo que cambia es la fecha de salida mínima que es UN DÍA DESPUÉS de la fecha actual. Todo debe ser generado dinámicamente.
Le cambié el nombre a las variables en el segundo bloque, el del CHECKOUT (Salida) ya que, al parecer sobreescribe al primer bloque y lo sigue sobreescribiendo. Están apuntando a diferentes IDs (#); cada campo de fecha tiene un ID diferente.
No sé cómo hacer para que el primer bloque funcione y se pueda elegir como mínimo 2 días después de la fecha actual y no permitir que elijan una fecha de salida anterior a la fecha de entrada, lo cual sería un absurdo. Abajo el 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>
<!--Intenté quitando las etiquetas script al final del 1er. bloque y del inicio del 2º bloque, pero nada.-->
<!--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>
Para que lo puedan ver más cómodamente, les comparto mi codepen. Orientaciones, por favor.
onload
, del segundo bloque, sobrescribe la que declaraste en el primero y siempre se va a ejecutar solo esa última. Una opción rápida es unir los códigos de ambas funciones en una sola y no necesitas una funciónformatISOLocal()
para cada campo, ahí no es donde está el problema.