Datepicker: librería para la selección de fechas en javascript

En el desarrollo web, la selección de fechas es una tarea común. Para facilitar este proceso y ofrecer una experiencia de usuario óptima, existen diversas librerías JavaScript, siendo Datepicker una de las más populares y versátiles. En este artículo, exploraremos a fondo las funcionalidades y el uso de Datepicker, centrándonos en la librería jQuery UI Datepicker, una de las implementaciones más extendidas y robustas.

¿Qué es jQuery UI Datepicker?

jQuery UI Datepicker es un widget que extiende las capacidades de jQuery, ofreciendo un calendario interactivo para la selección de fechas. Se integra fácilmente en formularios HTML, mejorando la experiencia del usuario al proporcionar una interfaz intuitiva y amigable para la selección de fechas. A diferencia de un simple campo de entrada de texto, Datepicker ofrece un calendario visual que permite a los usuarios seleccionar una fecha de forma rápida y precisa, evitando errores comunes de formato.

Integración de jQuery UI Datepicker

Para utilizar jQuery UI Datepicker, necesitamos incluir los archivos CSS y JavaScript necesarios en nuestro documento HTML. Esto se puede hacer a través de CDN (Content Delivery Network) o descargando los archivos localmente. Recomendamos el uso de CDNs para facilitar la actualización y evitar la necesidad de gestionar archivos locales.

Inclusión de archivos a través de CDN

A continuación, se muestra el código para incluir los archivos CSS y JavaScript de jQuery UI Datepicker mediante CDN:

<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/11/themes/ui-lightness/jquery-ui.css' rel=tylesheet'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/11/jquery-ui.min.js"></script>

Es importante notar que primero se incluye jQuery, ya que jQuery UI Datepicker depende de jQuery para su funcionamiento.

Implementación básica de Datepicker

Una vez incluidos los archivos, podemos implementar Datepicker en un campo de entrada de texto utilizando jQuery. El siguiente código muestra un ejemplo básico:

<input type="text" id="datepicker"> <script> $(function() { $("#datepicker").datepicker(); }); </script>

Este código selecciona el elemento con el ID "datepicker" y le aplica la funcionalidad de Datepicker. De forma predeterminada, Datepicker mostrará un calendario al hacer clic en el campo de entrada.

Personalización de jQuery UI Datepicker

jQuery UI Datepicker ofrece una amplia gama de opciones para personalizar su apariencia y comportamiento. Algunas de las opciones más comunes incluyen:

Formato de fecha

Podemos especificar el formato de la fecha que se mostrará y se guardará en el campo de entrada. Por ejemplo, para mostrar la fecha en el formato dd/mm/yy, usaríamos la opción dateFormat:

$("#datepicker").datepicker({ dateFormat: "dd/mm/yy" });

Fecha por defecto

Podemos establecer una fecha por defecto que se mostrará al cargar el calendario. Para ello, utilizamos la opción defaultDate:

$("#datepicker").datepicker({ defaultDate: "01/01/2024" });

Día de la semana inicial

Podemos definir el día de la semana que se mostrará como el primer día de la semana (domingo=0, lunes=1, etc.) usando la opción firstDay:

$("#datepicker").datepicker({ firstDay: 1 }); // Lunes como primer día

Selección de mes y año

Podemos permitir a los usuarios seleccionar el mes y el año directamente desde el calendario utilizando las opciones changeMonthy changeYear:

$("#datepicker").datepicker({ changeMonth: true, changeYear: true });

Fechas máximas y mínimas

Podemos restringir el rango de fechas seleccionables utilizando las opciones minDatey maxDate. Estas opciones aceptan diferentes valores, como un número de días relativo (+1d para mañana, -1w para la semana pasada), una fecha específica o una cadena de texto:

$("#datepicker").datepicker({ minDate: "-1m", maxDate: "+1m" }); // Permitir selección de fechas del mes pasado al mes siguiente

Deshabilitar fechas específicas

Podemos deshabilitar fechas concretas utilizando la opción beforeShowDay. Esta opción recibe una función que retorna un array con tres valores: un booleano indicando si la fecha está habilitada, una clase CSS a aplicar y un texto alternativo. Un ejemplo para deshabilitar los fines de semana:

$("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends });

Interacción entre varios Datepickers

Podemos vincular dos o más Datepicker para restringir la selección de fechas en función de la selección realizada en otro calendario. Por ejemplo, podemos tener un Datepicker para la fecha de inicio y otro para la fecha de fin, donde la fecha de fin no puede ser anterior a la fecha de inicio:

$( "#datepicker1" ).datepicker({ onSelect: function( selectedDate ) { var date = $(this).datepicker( 'getDate' ); date.setDate( date.getDate() + 1 ); $( "#datepicker2" ).datepicker( "option", "minDate", date ); } });

Datepicker en ReactJS

Si bien jQuery UI Datepicker es una excelente opción, su integración directa en aplicaciones ReactJS puede resultar compleja. En React, la mejor práctica es utilizar componentes de fecha pre-construidos que se integran mejor con el ciclo de vida de React. Sin embargo, para proyectos que ya utilizan jQuery UI, se puede realizar la integración siguiendo las siguientes instrucciones:

Instalación

Primero, debemos instalar las dependencias necesarias:

npm install jquery jquery-ui --save

Importación

Importamos jQuery y el componente Datepicker en el componente de React:

import $ from 'jquery'; import 'jquery-ui/ui/widgets/datepicker';

Implementación

Dentro del método componentDidMount, inicializamos el Datepicker y en componentWillUnmountlo destruimos para evitar problemas de memoria:

componentDidMount() { $( '#datepicker' ).datepicker(); } componentWillUnmount() { $( '#datepicker' ).datepicker( 'destroy' ); }

Consultas habituales sobre Datepicker

A continuación, se presentan algunas de las consultas más frecuentes sobre Datepicker :

Datepicker es una librería poderosa y flexible que simplifica la selección de fechas en aplicaciones web. Su facilidad de uso, amplia gama de opciones de personalización y extensa documentación la convierten en una herramienta esencial para cualquier desarrollador web.

Si quieres conocer otros artículos parecidos a Datepicker: librería para la selección de fechas en javascript puedes visitar la categoría Libros y Librerías.