En este tutorial vamos a personalizar el widget Datepicker de jQuery UI. Antes de nada, echemos un vistazo al ejemplo en funcionamiento . Estos son los archivos de los que se compone el tutorial.

jqueryui_personlizacion-archivos

Estructura de directorios para nuestro Datepicker

Tenemos una carpeta local ‘ icon-folder-open-o css ‘ que contiene tres archivos .css:

  • bootstrap.min.css: para darle un aspecto y maquetación de base al ejemplo. En realidad es prescindible en caso de no querer usar Bootstrap o cualquier otro framework como Foundation, etc.
  • custom.css: clases personalizadas (sobreescritas) para mejorar el aspecto que nos proporciona jQuery UI. También lleva una mínima configuración (un tipo de letra de Google Fonts por defecto).
  • jquery-ui.theme.min-css: tema personalizado de ejemplo disponible en la página del widget Datepicker de jQuery UI. Este es el CSS que sobreescribimos parcialmente mediante ‘custom.css‘. Nos sirve como una base estética algo mejor que la que viene por defecto.

Para simplificar el ejemplo, se cargan externamente (desde CDN) los siguientes archivos css:

  • font-awesome.min.css: en nuestro ejemplo lo estamos usando sólo para el icono del calendario en el botón que acompaña al campo de texto (‘input‘).
  • jquery-ui.min.css: se encarga de darle un aspecto base al widget Datepicker. Es necesario añadirlo.

La carga (dentro de HEAD) de todos los css queda así:

Dentro de la carpeta ‘  css ‘ tenemos una carpeta ‘  icon-folder-o images ‘ que acompaña al widget Datepicker de jQuery UI. Son imágenes para elementos visuales del widget.

jqueryui_persoanlizacion-elementos-interfaz

Detalle de los archivos de imagen que incluye Datepicker de jQuery UI

Este es un detalle de algunas de las imágenes (sprites) que usa internamente el plugin Datepicker de jQuery UI.

jqueryui_personalizacion-elementos-interfaz-previa

Imágenes (sprites) que utiliza Datepicker para representar iconos, botones, etc.

Como puedes ver en el ejemplo, el aspecto que le hemos dado al Datepicker es más limpio, plano y moderno que el que trae por defecto.

jqueryui_personalizacion-calendario_desplegado

Aspecto de nuestro Datepicker personalizado

El archivo .css que se encarga de la personalización es custom.css. En él simplemente sobreescribimos los estilos que queramos alterar. Este es el aspecto de custom.css:

La traducción y personalización del plugin Datepicker la obtenemos aplicándole el siguiente script:

Como ves, en el script redefinimos cosas importantes del comportamiento que trae Datepicker de jQuery UI por defecto. En concreto hemos cambiado:

  • El formato de fecha, para que sea día/mes/año.
  • El primer día de la semana a Lunes, ya que por defecto (en Inglés) es el Domingo.
  • Traducciones de los días de la semana y de los meses, también en sus versiones abreviadas (“Do”, “Lu”, “Ma”, “Mi”…)
  • También hemos añadido la funcionalidad de que al seleccionar una fecha del calendario, éste se oculte y aparezca la fecha en el campo de texto de nuestro plugin.

Este es el ejemplo en funcionamiento.

En mi GitHub tienes todos los  archivos fuente de este ejemplo.

Si quieres investigar más, puedes revisar la  documentación oficial del Widget Datepicker de jQuery UI.

Share:Tweet about this on TwitterShare on FacebookShare on Google+