es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Deshabilitar fechas pasadas en el tipo de fecha de las páginas Razor, minDate no está funcionando.

Quiero deshabilitar las fechas pasadas del calendario en las páginas de Razor. Le di la opción minDate. No estaba funcionando. Aún están disponibles las fechas pasadas.

<input id="DateRequestDeadLine" asp-for="RequestFormMaster.RequestDeadLine" type="date" class="form-control form-control-sm">
$( "#DateRequestDeadLine" ).datepicker({
    minDate: 0
});

Cualquier ayuda sería apreciada.
Gracias,
Teena

SOLUCIÓN

Simplemente agregué el atributo min mediante javascript.
El siguiente código agregará 5 días a hoy. Y asegúrese de que el atributo min esté en formato ‘yyyy-mm-dd’.

var endDate = "", noOfDaysToAdd = 5, count = 0;
while (count < noOfDaysToAdd) {
    endDate = new Date(startDate.setDate(startDate.getDate() + 1));
    if (endDate.getDay() != 0 && endDate.getDay() != 6) {
        //Date.getDay() da el día de la semana comenzando desde 0(Domingo) hasta 6(Sábado)
        count++;
    }
}

var dd = String(endDate.getDate()).padStart(2, '0');
var mm = String(endDate.getMonth() + 1).padStart(2, '0'); //¡Enero es 0!
var yyyy = endDate.getFullYear();
endDate = dd + '/' + mm + '/' + yyyy;
var minDate = yyyy + '-' + mm + '-' + dd;

document.getElementById("DateRequestDeadLine").style.display = "block";
document.getElementById("DateRequestDeadLine").min = minDate;

Gracias,
Teena

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para deshabilitar las fechas pasadas del calendario en las páginas de Razor, puedes usar la opción minDate en el datepicker de jQuery. Sin embargo, a veces la opción minDate puede no funcionar como se espera. En ese caso, puedes establecer el atributo min mediante JavaScript, lo cual restringirá la selección de fechas pasadas.

    Aquí está el código actualizado:

    <input id="DateRequestDeadLine" asp-for="RequestFormMaster.RequestDeadLine" type="date" class="form-control form-control-sm">
    
    <script>
        var startDate = new Date();
        var endDate = new Date();
    
        // Agrega 5 días a hoy
        endDate.setDate(startDate.getDate() + 5);
    
        // Repite hasta que se alcance un día que no sea de fin de semana
        while (endDate.getDay() === 0 || endDate.getDay() === 6) {   
            endDate.setDate(endDate.getDate() + 1);
        }
    
        // Construye el atributo min en formato aaaa-mm-dd
        var minDate = endDate.toISOString().split('T')[0];
    
        // Establece el atributo min
        document.getElementById("DateRequestDeadLine").min = minDate;
    </script>
    

    En el código anterior, primero creamos un objeto de fecha de inicio y un objeto de fecha de fin con 5 días añadidos a hoy. Luego, repetimos hasta alcanzar un día que no sea de fin de semana. Después de eso, construimos el atributo min en formato aaaa-mm-dd y lo establecemos en el elemento de entrada con el ID “DateRequestDeadLine”.

Comments are closed.