0

mi problema es que mediante Javascript estoy creando un atributo min en un label tipo DATE, y se crea correctamente, pero el navegador no bloquea las fechas anteriores. Os dejo código y capturas:

JS

function deshabilitarFechaAnterior() {
    const fechaInput = document.querySelector('#fecha');

    const fechaAhora = new Date(); // Crea la fecha actual, incluyendo horas, minutos y segundos
    const year = fechaAhora.getFullYear();
    const mes = fechaAhora.getMonth() + 1; // Los meses empiezan en 0
    const dia = fechaAhora.getDate() + 1; // Para no poder reservar el mismo dia

    // Formato deseado: YYYY-MM-DD -> Es el que usa HTML
    const fechaDeshabilitar = `${year}-${mes}-${dia}`;

    // Agregamos el atributo MIN al input DATE
    fechaInput.min = fechaDeshabilitar;
}

HTML

<div class="campo">
    <label for="fecha">Fecha</label>
    <input id ="fecha" type="date">
</div>

Capturas

Fecha en Chrome Código en Chrome

2 respuestas 2

1

min La minima fecha aceptada; Una fecha menor que esta caera constraint validation. Si el valor es min el atributo no es valido y esa el formato yyyy-MM-dd, entonces el elemento no tiene valor minimo.

Este valor debe especificarse como menor o igualmax attribute.

Creo que tienes que ponerle un max tambiem.

0

acabo de resolver el problema. Lo que ocurría es que no cumplía con el formato, el mes debe cumplir el formato MM, es decir, tener dos dígitos. Para ello he creado la siguiente comprobación:

let fechaDeshabilitar;
    if ([10,11,12].includes(mes)){
        fechaDeshabilitar = `${year}-${mes}-${dia}`;
    }else{ // Añadimos el 0 para hacer el formato correcto
        fechaDeshabilitar = `${year}-0${mes}-${dia}`
    }

Así, si los meses no tienen dos dígitos, le añado un 0 delante y funciona perfectamente.

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.