martes, 3 de marzo de 2009

Configuración y localización de JQuery UI Datepicker

JQuery User Interface es una biblioteca que nos permitirá mejorar sustancialmente la experiencia del usuario de nuestra aplicación web -a cambio, claro está, de una pequeña ralentización de la carga de la página-. Trabaja sobre JQuery ofreciendo con una codificación sencillísima una serie de efectos visuales y de widgets totalmente personalizable -la biblioteca se descarga sólo con las funcionalidades que se vayan a utilizar-.

Datepicker es uno de las más potentes. Consiste en un calendario que se despliega junto a un input para que el usuario seleccione la fecha en lugar de teclearla. Vamos a ver cómo instalarlo y, sobre todo, cómo localizarlo para que las fechas se muestren en el formato e idioma españoles.

Lo primero es tener un campo input en el que recogeremos la fecha, en el que no necesitamos añadir más que el código HTML:

<input name="fecha" type="text">


En el head del documento HTML necesitamos llamar a las siguientes bibliotecas:

<script type="text/javascript" src="jquery-1.2.6.js"></script>

<script type="text/javascript" src="jquery-ui-personalized-1.6rc6.js"></script>

<script type="text/javascript" src="i18n/ui.datepicker-es.js"></script>

<script language="javascript" src="ready.js"></script>



Donde:
jquery-1.2.6.js - Es el núcleo de JQuery.
jquery-ui-personalized-1.6rc6.js - Es núcleo de JQuery User Interface.
i18n/ui.datepicker-es.js - Es el pack de localización a español de Datepicker
ready.js - Es la biblioteca donde tenemos la función $(document).ready()

Lanzar datepicker desde $(document).ready
$(document).ready(function(){
$('#fecha).datepicker({
changeMonth: true,
changeYear: true,

showOn: 'button',
buttonImage: '/img.png',
buttonImageOnly: true,

dateformat: 'dd-mm-yy',
firstDay: 1
});

$('#fecha').datepicker($.datepicker.regional['es']);

});
Las opciones que hemos escogido son las siguientes:
changeMonth: true - Permite al usuario cambiar el mes desde un select.
changeYear: true - Permite al usuario cambiar el año desde un select.
showOn: 'button' - El calendario se desplegará desde un botón que aprecerá junto al input de la fecha.
buttonImage: 'img.png' - La ruta a la imagen del botón.
buttonImageOnly: true - Con esta línea hacemos que Datepicker sólo aparezca al hacer click en el botón -no en el input-.
dateformat: 'dd-mm-yy' - Cambiamos el formato de fecha a día-mes-año en lugar del formato por defecto, que es mes-año-día.
firstDay: 1 - hacemos que el primer día de la semana sea el Lunes (por defecto el valor es 0, domingo).

Por último, la línea $('#fecha').datepicker($.datepicker.regional['es']); carga el pack de idioma español de datepicker.

1 comentario:

Txemita dijo...

Buenos dias! veo que entendeis del tema y os queria hacer una pregunta. Tengo una empresa de construccion y quiero expandirme un poco y llegar a mas gente. El caso es que me esta ayudando mi primo a escribir esto jajja que sabe algo de esto, yo nada. El caso es que quiero crear una pagina de esas a ver que tal va. Hemos encontrado un sitio de desarrollo web aqui en bilbao y queria que me dijeseis a ver que os parece. Me parece interesante que este aqui para poder reunirme con ellos y asi consensuar el contenido. Que os parece?? la conoceis??
Un saludo y hasta pronto!