Unidad 23. Widgets de jQuery (IV)


23.4. Datepicker

El widget Datepicker añade un calendario a los campos de texto de un formulario para que el usuario pueda seleccionar fácilmente una fecha.

Para efectos de demostración, haz clic en el siguiente cuadro de texto:

 

Cuando insertamos el widget Datepicker, nuestra página web sólo muestra la caja de texto. Para verla en funcionamiento, tendríamos que usar la vista En vivo y hacer clic en ella.

Las propiedades del widget son las siguientes:

El atributo ID, como sabemos, podemos personalizarlo y nos servirá para obtener el dato seleccionado por el usuario al momento de procesar el formulario. También nos sirve para establecer propiedades CSS personalizadas.

Los controles Date Format y Localización permiten establecer el formato de la fecha. Sin embargo, si seleccionamos Localización: Español, no obtendremos un calendario en nuestro idioma, ya que sólo afecta al formato de fecha. Para cambiar el widget a nuestro idioma, deberemos modificar el código, como mencionaremos más adelante.

La casilla Imagen de botón añade un botón a la derecha de la caja de texto para que aparezca el calendario. Su apariencia predeterminada es la siguiente:

Las opciones Change Month y Change Year añaden controles a los meses y las fechas para que podamos cambiarlas rápidamente a través de listas desplegables.

La casilla En lín. hace aparecer el calendario como parte de la página web, en lugar de ser una ventana flotante junto a la caja de texto.

La opción Show Button Panel muestra un área inferior con dos botones, Today y Done, como en la siguiente imagen.

Min. Date y Max. Date delimitan el número de días que pueden seleccionarse en el calendario a partir de la fecha actual. El resto de los días aparece desvanecido.

Finalmente, la opción Numbers of Months determina el número de meses que aparecerán al activarse el widget. Con dos meses tendría la siguiente apariencia.

Probablemente la mayor incomodidad de utilizar el widget Datepicker sea el hecho del idioma. Para hacer que el calendario aparezca en español, tendríamos que modificar el código del archivo jqueryui-1.10.4.datepicker.min.js (los números pueden cambiar en función de la versión de jQuery que Dreamweaver utilice en ese momento). Bastaría con buscar los meses y los días en inglés entrecomillados y escribir sus equivalentes en español: "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", así como sus versiones abreviadas y algunas palabras adicionales, como "Today", "Next", "Done", etcétera. Sin embargo, el riesgo es cometer inadvertidamente algún error que afectara el funcionamiento del widget, lo cual podríamos reparar eliminando el widget, así como el archivo .js e insertarlo de nuevo para obtener otra copia correcta de la librería Javascript. Los nombres de los meses aparecen juntos en el código. Aquí los mostramos seleccionados por si quieres intentarlo.

 


Marzo-2015
Pág. 23.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.