0

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.

1
  • 1
    La propiedad 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ón formatISOLocal() para cada campo, ahí no es donde está el problema.
    – Triby
    Commented el 4 jul. 2022 a las 15:24

1 respuesta 1

1

Agrega un evento change en tu checkIn para escuchar los cambios. Cuando se establezca la fecha de entrada, completa el campo de salida con la fecha que resulta al sumarle un día al campo de entrada, y establece el atributo min para que impida seleccionar otra fecha. Te adjunto un breve ejemplo:

var checkIn = document.getElementById('checkIn');
var checkOut = document.getElementById('checkOut');

checkIn.addEventListener('change', function() {
    var checkInDate = new Date(checkIn.value);
    var checkOutDate = new Date(checkInDate.getTime() + (24 * 60 * 60 * 1000));
    checkOut.value =checkOutDate.toISOString().split('T')[0];
    checkOut.min = checkOutDate.toISOString().split('T')[0];
});
<input type="date" id="checkIn" name="checkIn" required>
<input type="date" id="checkOut" name="checkOut" required>

Ten en cuenta que el atributo min de un input de tipo date no es soportado por Safari en móviles con iOS, por lo que para dar soporte para todos los navegadores, es recomendables uses alguna solución de terceros como jquery datepicker, bootstrap-datepicker o cualquier otra que no sea la api nativa del navegador. Dado que preguntas exclusivamente por vanilla javascript, limité mi respuesta a ello.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.