Cómo personalizar y dar forma a jQuery UI Datepicker

La interfaz de usuario de jQuery es simplemente impresionante y, debido a su facilidad de uso, es popular y se usa ampliamente en casi cualquier sitio web que necesite funciones interactivas..

Y, en esta publicación, veremos una de las características proporcionadas, el widget del selector de fecha.

Intentaremos aprender a personalizar el tema del calendario, de modo que pueda crear su propio tema que corresponda a su diseño general. Sin embargo, necesita un poco de comprensión en JavaScript y familiaridad con CSS antes de seguir este tutorial..

Manifestación
Descargar fuente

Si estás listo, vamos a empezar.

Los activos

Preparemos algunos de los activos esenciales para el calendario..

Primero, el diseño del calendario se referirá a este archivo PSD de Premium Pixels. Así que es mejor que lo descarguemos primero para ayudarnos a tomar una muestra de los colores que necesitamos. Luego, descarga dos patrones de Sutil Patrones que utilizaremos como fondo de nuestro calendario. En este ejemplo, decidimos utilizar los siguientes patrones: denim negro y cuero oscuro..

También necesitaremos una herramienta de desarrollo web como Firebug para inspeccionar las clases de elementos / ID generadas por la interfaz de usuario jQuery.

Bueno, creo que hemos tenido suficiente preparación. Ahora vamos al primer paso..

Paso 1: jQuery UI Datepicker

Primero, ve a la página de descarga de jQuery UI. En esta página se le presentarán algunas opciones, de la siguiente manera; El núcleo de la interfaz de usuario, widgets, interacciones y efectos.

Deberíamos deseleccionar todos los componentes, ya que no los necesitamos todos.

Luego, en el Widgets Seleccione la sección sólo el selector de fecha. La interfaz de usuario de jQuery seleccionará las dependencias esenciales automáticamente, y luego descargar el archivo.

Enlace todos los archivos descargados - excepto el CSS - a su documento HTML en blanco, como sigue:

Paso 2: Personalizando el Selector de fechas

En este paso, configuraremos un selector de fechas con las siguientes opciones.

El código anterior indicará a jQuery que muestre el calendario en un elemento con selector de fechas carné de identidad. Por lo tanto, necesitamos poner lo siguiente div etiqueta con - ID de selector de fecha - en la sección del cuerpo para formar el calendario:

Ahora el calendario ya debería haberse generado y aparecer así, sin ningún estilo, pero aún tiene la funcionalidad.

Paso 3: Los estilos

Ahora comencemos a estilizar el calendario. Comenzaremos por normalizar todos los elementos, como de costumbre, y crear una nueva hoja de estilo, en este ejemplo lo nombro datepicker.css. Luego vincúlalas todas al documento HTML.

Luego, primero adjuntaremos un fondo al cuerpo para que nuestro HTML no se vea tan simple.

body background: url ('… /img/darkdenim3.png') repite 0 0 # 555;

A continuación, especificaremos el ancho del selector de fecha, lo posicionaremos en el centro y agregaremos sombra para dar el efecto de prominencia al calendario.

.ui-datepicker ancho: 216px; altura: auto; margen: 5px auto 0; fuente: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5);

También eliminaremos la decoración de subrayado predeterminada de cada etiqueta de anclaje.

.ui-datepicker a text-decoration: none;

El calendario en jQuery UI está formado con un mesa. Entonces, vamos a añadir 100% ancho para el mesa, por lo que tendrá el mismo ancho máximo que la envoltura anterior; es decir 216px

.tabla ui-datepicker ancho: 100%;

Estilo de la sección de encabezado

El selector de fecha tiene una sección de encabezado que contiene Mes año del calendario. Esta sección tendrá la textura de piel oscura que hemos descargado anteriormente con un color de fuente ligeramente blanco y 1px sombra blanca en la parte superior.

.ui-datepicker-header background: url ('… /img/dark_leather.png') repita 0 0 # 000; color: # e0e0e0; font-weight: negrita; -webkit-box-shadow: recuadro 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: inserción 0px 1px 1px 0px rgba (250, 250, 250, .2); cuadro de sombra: recuadro 0px 1px 1px 0px rgba (250, 250, 250, .2); text-shadow: 1px -1px 0px # 000; filtro: dropshadow (color = # 000, offx = 1, offy = -1); línea de altura: 30px; ancho del borde: 1px 0 0 0; estilo de borde: sólido; color de borde: # 111;

A continuación, vamos a centrar la Mes posición.

 .ui-datepicker-title text-align: center;

Reemplace la Siguiente y Prev Texto con las imágenes de flecha de sprite cortadas desde la PSD.

.ui-datepicker-prev, .ui-datepicker-next display: inline-block; ancho: 30px; altura: 30px; text-align: center; cursor: puntero; imagen de fondo: url ('… /img/arrow.png'); repetición de fondo: no repetición; altura de la línea: 600%; desbordamiento: oculto;

Luego, ajuste la posición de la flecha respectivamente.

.ui-datepicker-prev float: left; posición de fondo: centro -30px;  .ui-datepicker-next float: derecha; posición de fondo: centro 0px;

Mientras que la nombres del día sección está envuelta dentro de una thead, Basado en nuestra referencia de diseño, tendrá un gradiente ligeramente blanco. Y, para simplificar nuestra tarea, usaremos esta herramienta para generar el código de gradiente:

.ui-datepicker thead background-color: # f7f7f7; imagen de fondo: -moz-lineal-gradiente (arriba, # f7f7f7 0%, # f1f1f1 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, # f7f7f7), stop de color (100%, # f1f1f1)); imagen de fondo: -webkit-linear-gradient (arriba, # f7f7f7 0%, # f1f1f1 100%); imagen de fondo: -o-lineal-gradiente (arriba, # f7f7f7 0%, # f1f1f1 100%); imagen de fondo: -ms-lineal-gradiente (arriba, # f7f7f7 0%, # f1f1f1 100%); imagen de fondo: gradiente lineal (arriba, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); borde inferior: 1px sólido #bbb;

los nombres del día El texto tendrá el color gris oscuro de # 666666 y también tendrán un blanco delgado. sombra de texto para darle el efecto presionado.

.ui-datepicker th text-transform: mayúsculas; tamaño de letra: 6 puntos; relleno: 5px 0; color: # 666666; text-shadow: 1px 0px 0px #fff; filtro: dropshadow (color = # fff, offx = 1, offy = 0);

En este punto, el calendario aparecerá así:

Estilo de las fechas

Las fechas del calendario están envueltas dentro de td o datos de la tabla. Por lo tanto, vamos a establecer el relleno a 0 para eliminar los espacios entre el td y dale un borde derecho de 1px.

.ui-datepicker tbody td padding: 0; borde derecho: 1px sólido #bbb;

A excepción de la última td, Que no tendrá borde derecho. Ponemos el borde derecho a 0 para esto.

.ui-datepicker tbody td: last-child border-right: 0px;

La fila de la mesa será casi la misma. Tendrá un borde inferior de 1px a excepción de la última fila.

.ui-datepicker tbody tr border-bottom: 1px solid #bbb;  .ui-datepicker tbody tr: last-child border-bottom: 0px;

Diseño del estado predeterminado, activo y activo

En este paso definiremos la fecha y los estilos activos. Primero definiremos el estado predeterminado de la fecha especificando la dimensión; Centra la fecha en la posición del texto, agrega color degradado y sombra blanca interna.

.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: negrita; text-align: center; ancho: 30px; altura: 30px; línea de altura: 30px; color: # 666666; text-shadow: 1px 1px 0px #fff; filtro: dropshadow (color = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; fondo: -moz-linear-gradient (top, #ededed 0%, #dedede 100%); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, # ededed), stop de color (100%, # dedede)); fondo: -webkit-linear-gradient (top, #ededed 0%, # dedede 100%); fondo: -o-lineal-gradiente (top, #ededed 0%, # dedede 100%); fondo: -ms-linear-gradient (top, #ededed 0%, # dedede 100%); fondo: gradiente lineal (arriba, # editado 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: inserción 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: inserción 1px 1px 0px 0px rgba (250, 250, 250, .5); cuadro de sombra: inserción 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; color: # b4b3b3;

Cuando se desplaza sobre la fecha, se volverá ligeramente blanco..

 .ui-datepicker-calendar .ui-state-hover background: # f7f7f7;

Cuando la fecha esté en un estado activo, tendrá los siguientes estilos.

 .ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: recuadro 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: inserción 0px 0px 10px 0px rgba (0, 0, 0, .1); cuadro-sombra: recuadro 0px 0px 10px 0px rgba (0, 0, 0, .1); color: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filtro: dropshadow (color = # 4d7a85, offx = 0, offy = 1); borde: 1px sólido # 55838f; posición: relativa; margen: -1px;

Ahora, el calendario debería verse mucho mejor..

Arreglando la posición

En este punto, mira la fecha cuidadosamente. Al hacer clic en la fecha en la primera o la última columna, notará que el estado activo se desborda un píxel del borde del calendario..

Así que aquí, vamos a hacer algunas pequeñas correcciones.

Primero vamos a disminuir el ancho de la fecha a 29px, y establezca el margen derecho de la última columna y el margen izquierdo de la primera columna para 0 para revertir el -1px margen que hemos establecido previamente para el estado activo.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; margen izquierdo: 0;  .ui-datepicker-calendar td: último-niño .ui-state-active ancho: 29px; margen derecho: 0;

La fecha en la última fila del calendario también tendrá un tratamiento similar..

.ui-datepicker-calendar tr: último-niño .ui-state-active altura: 29px; margen inferior: 0;

Ahora, veamos el resultado. Bueno, el calendario ahora se ve hermoso y se ajusta perfectamente a nuestra referencia de diseño. Y, puede ver la demostración y descargar la fuente para examinar el código de los enlaces debajo de la imagen.

Manifestación
Descargar fuente

Bonus: Extiende el calendario

Bueno, hoy hemos aprendido bastante sobre cómo crear un tema personalizado para jQuery UI Datepicker. Pero no debe detenerse aquí, ya que todavía hay muchas cosas que se pueden extender desde este selector de fechas. Dependiendo de su dominio de jQuery y CSS, extienda el calendario para que sea así: entrada de texto con un selector de fecha superpuesto.

Manifestación
Descargar fuente

Otras lecturas

Para leer más sobre jQuery UI. Puedes leer la documentación completa aquí:

Comenzando con jQuery UI
Theming jQUery UI
jQuery UI: Theming API classes

Pensamientos finales

Gracias por leer y seguir este tutorial, espero que lo encuentre útil. Y, si tiene algún comentario o le gustaría agregar cosas que podrían faltar en este tutorial, no dude en señalarlo en la sección de comentarios a continuación. Gracias de nuevo).