En ocasiones, al implementar un selector de fechas, nos interesará restringir el rango de selección para el usuario. Para lograr limitar las fechas en el componente Datepicker de jQuery, existen diversas estrategias que permiten controlar qué días están disponibles y cuáles deben aparecer como deshabilitados.
Uso de beforeShowDay para restringir días específicos
La función beforeShowDay es fundamental, ya que calcula para cada día del calendario si se pinta como elegible o no. Esta función necesita devolver un TRUE o FALSE para funcionar, y si es TRUE pondrá ese día como elegible.
Si te fijas, la función recibe un parámetro, que representa la fecha exacta del día que va a calcular. Como las fechas tienen problemas de formato, el datepicker te da la función formatDate para precisamente formatearla y poder realizar comparaciones eficaces contra un array de fechas permitidas o bloqueadas. Esta función se ejecutará una vez por cada día que haya en el rango de fechas definido al crear el componente.
Consideraciones sobre el formato de fecha
Es importante recordar que el manejo de fechas en JavaScript requiere precisión. Las fechas deben seguir formatos estándar, preferiblemente el formato inglés (año-mes-día), donde los meses y días menores de 10 deben incluir el cero delante. Si bien dateToShow es solo un argumento que se le pasa a la función y puedes ponerle el nombre que quieras, siempre debes consultar la documentación del datepicker para verificar cuántos argumentos serán enviados.
Opciones de configuración del Datepicker
Además de la validación manual, existen opciones nativas que facilitan la interacción y configuración del calendario:
Lea también: El futuro del manejo de tiempo en JavaScript: guía sobre Temporal
- changeMonth y changeYear: Permiten dar accesos rápidos a diferentes meses y años para una mejor navegación.
- minDate y maxDate: Permiten establecer límites fijos o desplazamientos relativos.
- setDate: Su función es fijar la fecha a mostrar en el Datepicker como predeterminada.
Gestión de rangos de fechas
Los valores pasados para limitar el rango pueden ser fechas fijas en formato dd/mm/aaaa o desplazamientos relativos. En los desplazamientos relativos se muestra un número seguido de 'y' para años, 'm' para meses y 'd' para días; si se antepone el signo '+' serán fechas futuras y si se antepone el signo '-' serán fechas en el pasado. Pueden acumularse desplazamientos relativos, separados por comas.
| Opción/Método | Descripción |
|---|---|
| minDate | Establece la fecha mínima permitida para selección. |
| maxDate | Establece la fecha máxima permitida para selección. |
| beforeShowDay | Función personalizada para habilitar/deshabilitar días específicos. |
| setDate | Fija la fecha predeterminada en el selector. |
Los Datepicker aparecen asociados a elementos en los documentos HTML y se muestran pegados a tales elementos, como las entradas de texto que estamos empleando, pero cabe la posibilidad de mostrarlos como cajas de diálogo independientes, flotantes sobre el documento. Recuerda que la inicialización del plugin ocurre solo cuando el usuario interactúa con el campo de entrada, momento en el cual se aplican las restricciones definidas.
Lea también: aprende a restringir entradas de fecha en Excel
Lea también: Análisis de la limitación a la deducción de intereses y su temporalidad
tags: #tiemdatepicker #jquery #limitar #fechas