Hoy en día hay muchas librerías que nos pueden hacer la vida mucho más sencilla cuando se trata de JavaScript. Todos conocemos bibliotecas como jQuery, Prototype y otras. En esta entrada voy a hablar sobre una extensión de la librería jQuery llamada jQuery UI.
Esta biblioteca ofrece varios componentes gráficos que podemos usar en nuestras páginas, entre ellos podemos destacar, datepicker — seleccionador de fecha (calendario), dialog — ventanas modales, progressbar — barra de progreso y muchos otros. Voy a explicar como podemos usar datepicker adaptado al entorno nuestro, es decir, a España con sus correspondientes días de la semana, nombres de meses, etc.
Antes que nada tenemos que descargar la última versión de jQuery e incluirla en nuestras páginas:
|
Una vez que tengamos jQuery instalado, descargamos jQueryUI desde esta página. Como podéis ver ofrecen las versiones completamente personalizadas para cada gusto. Yo aconsejaría descargar la versión de la librería completa, al menos para las pruebas.
Desempaquetamos todos, en este punto vamos a tener tres grupos de ficheros, el propio JavaScript, las imágenes y el css, en un principios las imágenes tienen que ir en el directorio /images, no he mirado las opciones para poder cambiar esto, pero estoy casi seguro que se podrá hacer de alguna forma. En cuanto al resto, lo incluímos en la cabecera de la página web.
|
Una vez hecho esto ya podemos instanciar el datepicker. La forma más sencilla de hacerlo es creado un input de tipo texto:
|
Una vez que lo tengamos definido, podemos instanciar el datepicker en el bloque head de la siguiente manera:
|
Oye, como podria hacer funcionar esta libreria llamandola desde un evento,
por ejemplo el onclic .
es que yo no puedo llamarla cuando se carga la pagina por que me marca error
se puede hacer eso??
Consulta, como hago para cargar el datepicker directamente cuando carga la pagina? es decir, sin ningun evento generado por el usuario?
En el head tengo cargado:
var GB_ROOT_DIR = “greybox/”;
y el datepicker activa cuando entras al campo del formulario, pero la idea es que lo haga directamente cuando carga la pagina.
el codigo de esto esta asi:
input name=”desde” id=”desde” type=”text” class=”campo_form” size=”15″ style=”width:90px;” />
// BeginWebWidget jQuery_UI_Calendar: jQueryUICalendar1
jQuery(“#desde”).datepicker({numberOfMonths: 2,showButtonPanel: true,dateFormat: “dd-mm-yy”});
// EndWebWidget jQuery_UI_Calendar: jQueryUICalendar1
Desde ya muchisimas gracias!!!!!
Saludos!
Damian
Hola Damian, tienes un ejemplo de lo que quieres exactamente en la pagina de jQuery UI
———-CODIGO———–
$(function() {
$(“#datepicker”).datepicker();
});
Date:
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
——FIN-CODIGO———–
Espero haberte ayudado
Un saludo!
Manu
Tienes que crear un div con id=datepicker, y poner en el head de la pagina el codigo que ha posteado manugaon. El tamaño del calendario lo puedes cambiar con el css de la página, cambiando el tamaño de la fuente en ese div. Ya contarás que tal. Un saludo