Datepicker con jQuery UI

En este tutorial aprenderás a agregar una elemento input que despliegue un calendario para seleccionar una fecha.

Cuando diseñamos una página o un sistema web en muchas ocasiones necesitamos agregar campos de fechas, lo cual resulta difícil que el usuario ingrese una fecha con el formato adecuado para su uso.

Para solucionar este problema y establecer un formato estándar con un elemento amigable existe jQuery User Interface (jQuery UI) donde encontramos una serie de elementos de programación de la interfaz de usuario preprogramados y listos para ser integrados en nuestros proyectos HTML.

El componente Datepicker nos proporciona un calendario personalizable, en el que podremos seleccionar fechas como entradas de formularios.

Mostrando un Datepicker

Para estos ejemplos utilizaremos las bibliotecas directamente de Internet pero te recomendamos descargarlas y agregarlas a tu proyecto.

Ejemplo 1: Uso básico de Datepicker

Explicación:

Agregamos la hoja de estilo de jQuery UI desde Internet ().

Agregamos la biblioteca de jQuery y jQuery UI desde Internet.

Función en Javascript para inicializar Datepicket, agregando el elemento al cual va asociado #datepicker

Al elemento input de tipo text le agregamos el la propiedad id el nombre antes establecido.

Nota: Para este tutorial utilizamos las bibliotecas estables a la fecha de publicación.

 

Ejemplo 2: Cambiando el formato de fecha seleccionada

 

Ejemplo 3: Mostrar menús de mes y año

 

Ejemplo 4: Modificando el idioma e indicando el día de inicio de semana

 

Ejemplo 5: Podemos combinar las características anteriores

En este último ejemplo hemos combinado las características de formato de fecha, menús para mes y año, modificar el idioma y estableciendo que la semana inicie en lunes.

En la página de descarga de jQuery UI encontraremos diferentes temas para los elementos.

 

Si requieres mas información puedes visitar la página del elemento en jQuery UI Datepicker.

Si te ha sido útil el post puedes compartirlo en tus redes sociales.
Déjanos tus comentarios y dudas.

Comentarios