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:
<script type="text/javascript" src="jquery.js"></script>
|
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.
<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui.js"></script>
|
Una vez hecho esto ya podemos instanciar el datepicker. La forma más sencilla de hacerlo es creado un input de tipo texto:
<input type="text" id="date-start" name="date-start" />
|
Una vez que lo tengamos definido, podemos instanciar el datepicker en el bloque head de la siguiente manera:
<script type="text/javascript">
$(function() {
$("#date-start").datepicker({
dateFormat: 'dd/mm/yy', // formato de fecha que se usa en España
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sabado'], // días de la semana
dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'], // días de la semana (versión super-corta)
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'], // días de la semana (versión corta)
firstDay: 1, // primer día de la semana (Lunes)
maxDate: new Date(), // fecha máxima
minDate: '-2y',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], // meses
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], // meses
navigationAsDateFormat: true,
});
});
</script>
|