Cómo no permitir seleccionar en Datepicker de Jquery los días pasados

Si queremos evitar que sean seleccionables los días pasados en el calendario en forma de popup emergente que tenemos con jquery al utilizar datepicker tenemos que hacer lo siguiente:
Para ver un calendario en forma de popup normal tenemos que poner:

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

con lo que vemos esto:

Calendario Jquery Popup con dias pasados seleccionables
Calendario Jquery Popup con dias pasados seleccionables

Para no permitir que los días pasados sean seleccionables tenemos que poner lo siguiente:

<script>
$(function() {
$("#datepicker").datepicker({ minDate: 0 });
});
</script>

Calendario Jquery Popup no permite seleccionar dias pasados
Calendario Jquery Popup no permite seleccionar dias pasados

con lo que tenemos un calendario que no permite seleccionar los días pasados.

Publicado por

victor

Hola!. Me llamo Víctor y soy Ingeniero Agrónomo de formación y programador web de profesión (desde el año 2006). Por otra parte me gusta, entre otras aficiones, el senderismo, jugar al futbol y al FIFA en la PS4. Te animo a participar en mi web www.biolucas.com

44 comentarios en «Cómo no permitir seleccionar en Datepicker de Jquery los días pasados»

  1. Hola Victor
    Tengo una duda si quisiera que un usuario pueda seleccionar una fecha en un rango de ciertos días sin contar domingo por ejemplo si fuera miercoles y yo quisiera que se le muestre al usuario un rango de 6 dias le tendria que aparecer activo los dias miercoles a martes…se podra hacer usando datepicker??

  2. Vitor es muy pobre tu explicacion, sobre todo para los que estamos recien empezando con esto de la programacion.
    No se ve como invocar desde html la funcion que señalas (datepicker) y si hay que colocar alguna linea adicional en el html.
    Bueno, es de espera que tus aportes sean aportes de verad

  3. Hola Victor buenos días, pregunta y espero me puedas ayudar, uso el datepicker con fechas seleccionables, que llegan desde un query, hasta aqui todo bien, pero cuando llega a las 7PM, ya no me permite seleccionar la fecha actual, si no que me permite seleccionar la fecha del día siguiente, he investigado y es por la hora del servidor, pero a la vez, ya he cambiado la hora del servidor, pero aún sigue el problema, también he agregado: moment.tz.setDefault(«Mexico/Cancun»); y sigue llegando las 7PM y me permite seleccionar el día siguiente, me podrías ayudar, te lo agradecería enormemente.

  4. buenas noches, gran aporte amigo, me salta una duda, como habilito solo la fecha actual, ni las pasadas ni las siguientes al día en que estamos?

  5. Hola estimados tengo la siguiente duda realice una validación para que solo se pueda ingresar fecha dentro del mismo día y no futuras, funciona a la perfección en el navegador chrome, pero en firefox no bloquea las fechas futuras y eso me trae problemas como puedo solucionarlo espero sus respuestas gracias.

  6. Hola!!! Tengo dos datetimepicker, uno de fecha hora inicio y otro de fecha hora fin; como hago para que, al seleccionar una fecha y hora en el primero, el segundo habilite seleccionar media hora después del primero? No se si se entiende mi pregunta…muchas gracias!

  7. Hola Víctor. Tu aporte me ayudó, solo tengo una duda. Como podria validar que la fecha actual no se seleccione? que la selección empiece después del día actual.
    Saludos.

  8. Hola Víctor, necesito bloquear la escritura dentro de la caja de texto, pero si me debe de permitir seleccionar una fecha al momento de desplegar el calendario.
    En si lo que quiero es que no me permita ingresar formatos a la caja de texto, solo que me permita seleccionar una fecha del calendario,

    me podrías ayudar con eso?

  9. Buenas Victor, estoy intentando calcular la diferencia de días entre dos fechas, pero lo que quiero es quitarle los fines de semana en el cálculo, es decir, solo quiero que calcule los días hábiles, el cálculo entre dos fechas lo hago de la siguiente manera «days = Math.floor((end.getTime() – start.getTime()) / 86400000);», pero me está dando mucho follón el intentar quitar los fines de semana, ¿alguna idea?

    Muchas gracias por tus aportes.

    1. Hola Jesús, muchas gracias por participar, veo que este tema del datapicker está muy solicitado ;D. Lo publico y espero que te podamos ayudar entre todos.

      Un saludo, Víctor

  10. /*

    Rango Fecha Ini Fecha Fin Costo
    1 2016-12-19 2017-01-01 $2250
    2 2017-01-02 2017-01-31 $1406
    3 2017-02-01 2017-04-23 $1554
    4 2017-04-24 2017-07-02 $1269
    5 2017-07-03 2017-08-18 $1463
    6 2017-08-19 2017-12-17 $1263

    si tenemos la fecha 2017-01-01 al 2017-01-04, se obtienen 3 dias en total, un dia le pertenece a la fecha final del rango 1 y los otros 2 dias le pertenecen a la fecha inicial del rango 2, como sumar el costo del rango 1 y costo del rango 2 tomando en cuenta que un dia le pertenece a la fecha final del rango 1 y los otros dos dias le pertenecen a la fecha inicial del rango 2?

    */

    1. Hola Luis, muchas gracias por participar, no entiendo muy bien la pregunta, la subo aquí y espero que te ayudemos entre todos.

      Un saludo, Víctor

  11. Buen día
    Gracias, excelente aporte, quería aprovechar Víctor si pudieras ayudarme, requiero bloquear «x» días del datepicker, para evitar selecciones esas fechas, supongamos 28,29 y 30 de abril, podrías asesorarme?
    gracias de antemano.

    1. Hola Daniel, muchas gracias por participar en el blog. Vamos a publicarlo a ver si alguien te puede ayudar. Si tenemos tiempo y lo resolvemos crearemos una entrada con la solución a este problema. Saludos!

    2. Hola Daniel,
      Necesito lo mismo que preguntaste tú.
      Conseguiste respuesta?

      En mi página de reservas de alquiler, necesito poder bloquear los días que no están disponibles los productos. Como dijiste tu, por ejemplo poder bloquear los días 28,29 y 30.

      Gracias y saludos!

      1. Hola Jose, muchas gracias por participar. Lo publico y espero que siendo la misma consulta de Daniel te podamos ayudar entre todos.

        Un saludo, Víctor

  12. Hola estimado,, he copiado el segmento de codigo en los ajustes adicionales de mi Contact Form 7 pero sigue sin funcionarme,, yo quiero que se me inhabiliten los dias pasados.
    Saludos

  13. Estimado, no se si aun este activo este post, pero igual te comento lo que necesito haber si alguien lo lee y me da una mano. Lo que necesito es que solo estén disponibles para ser seleccionados los 1 y 16 de todos los meses, como hago eso en el datepicker, agradeciera mucho su apoyo al respecto.

    1. Hola Gerardo, muchas gracias por participar. Vamos a ver como hacer activos siempre esos días y en cuanto lo sepamos o nos ayude alguien te lo comunicamos. Saludos!

  14. Muy buena su pag, tengo una duda soy nuevo!!! como realizo para validar con la fecha del ordenador o la fecha actual y bloquear los dias anteriores. esto lo puedo realizar como por ejemplo para dar citas medicas no permitir colocar citas en dias anterioers, pero si por ejemplo necesito es bloquear los dias posteriores al actual, esto lo utilizaria para consultas

  15. Hola victor me sirve de mucho tu post pero me interesaria saber como mostrar solo los dias sabados con el date picker

    gracias

  16. Disculpa, quisiera saber como desactivar los días del calendario con datepicker y solo elegir mes y año
    Saludos y espero puedas ayudarme!

    1. Hola Ivan, gracias por contactar. La verdad nunca he visto un popup sólo de meses y de años, lo que si he visto son 2 selectores independientes (o dependientes si tienen relación con el contenido existente), uno con los meses y otro con los años. ¿Te refieres a eso?. Un saludo, Víctor

  17. Hola Victor, espero estes bien, como se podria traducir al español y frances el Calendario Jquery Popup el mes y los dias de la semana? saludos Roberto y gracias de antemano por este sitio.

    1. Hola de nuevo Roberto ;D. La solución a las traduciones suelo encontrarlo buscando en admin/config/regional/translate/translate. Creo que es Case Sensitive, por lo que tienes que poner la palabra exacta, en este caso imagino que será Julio por ejemplo, o prueba con julio. Si no te sale tendría que ver donde poner t(‘texto’) para hacer que este texto en concreto sea traducible.
      Coméntame si te sirvió.

      Un saludo, Víctor

      1. Hola Victor no pensé que me responderías tan rápido, muchísimas gracias se que es por traducir interfaz pero lo que quiero traducir del ingles al español y al francés es el pop up calendar los meses y los días de la semana o sea la imagen que aparece arriba ya que por el link que me diste probe ponerlos en ingles y ya me aparecen traducidos y como tengo un sitio en 3 idiomas y voy a español y francés en el webform me aparecen en ingles solamente.Existira algun popup calendar en español en drupal.org? saludos

        1. Hola Roberto, voy a mirar como está hecho. Si no lo puedes traducir como te comenté quizás tengas que retocar el módulo añadiéndole t() al texto para que sea traducible.

          Un saludo, Víctor

  18. Hola buen día.

    Quiero utilizar datepicker en mi pagina sin embargo estoy utilizando tambien ajax con jquery. Con esto no me aparece mi calendario. ¿Que podria hacer para solucionarlo?

    1. Hola Humberto, muchas gracias por escribir. Te pido disculpas porque no he entendido bien el problema. ¿Te refieres a que tienes un calendario que utiliza AJAX y JQuery y al modificarlo para que no se muestre los días anteriores al actual dejó de funcionar?. Si quieres puedes pegar código y entre lo que podamos ver aquí y lo que vean los demás navegantes quizás te podamos ayudar.

      Un saludo, Víctor

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CommentLuv badge