Componente Datepicker de jQuery UI

  • Por
Un componente de interfaces de usuario en jQuery UI que sirve para mostrar un calendario con el que seleccionar una fecha de manera visual.

Una de las interfaces de usuario más solicitadas y también de las más útiles, es un calendario para seleccionar una fecha. Este calendario permite que las personas puedan escoger una fecha a golpe de ratón y de manera visual, sin tener que escribir la fecha. Sin lugar a dudas el visitante agradecerá la comodidad de seleccionar la fecha por medio de este componente, pero también existen otras ventajas, como no obligarle a conocer el formato de fecha que necesitamos para una correcta entrada de datos.

En el artículo anterior ya estuvimos explicando las generalidades de las jQuery UI, por lo que se recomendaría su lectura, ya que contiene algunas guías que serán necesarias para aprender a utilizar cualquier tipo de componente y que vamos a dar por sabidas en el presente texto. Conviene leer por tanto el artículo Primeros pasos con jQuerty UI y la continuación Empezar a usar jQuery UI.

Entender la documentación de los componentes jQuery UI

Todos los componentes que nos ofrecen en jQuery UI los podemos encontrar correctamente documentados en la página de jQuery UI, a través de la sección de demos y documentación. En las páginas de demos encontraremos varios casos de uso de los componentes y también la documentación para hacerlos funcionar, léase, las opciones de configuración que ponen a nuestra disposición, así como los métodos de los objetos, eventos, etc.

De paso que explicamos cómo utilizar este calendario para seleccionar fechas queremos explicar también las cosas que podremos encontrar en la documentación de los componentes en general, así cualquier persona podrá continuar a partir de aquí, ya sea pasando a usos más avanzados del calendario o de otros componentes de jQuery UI. Así pues, conviene echar un vistazo a la página del demo y documentación del Datepicker, para revisar las informaciones que nos encontramos.

En la documentación es especialmente ilustrador el apartado de ejemplos, que contiene varios casos de uso para cada componente y para distintas opciones de configuración habituales. Por ejemplo, para la documentación del calendario podremos ver versiones con distintos formatos, idiomas, mostrando el número de la semana en el año, cambios en la animación, ver más de un mes al mismo tiempo, restricción de fechas para seleccionar sólo un rango permitido, etc. Nosotros nos centraremos en mostrar cómo localizar el calendario para que esté escrito en español y las fechas también tengan el formato dd/mm/aa, además veremos cómo colocar algunas opciones de configuración para mostrar un icono al lado del campo de texto, que una vez pulsado salga el calendario y otras cosas.

Un poco más abajo de los demos de uso de cada componente encontraremos también la documentación que mostrará el listado completo de opciones de configuración, los eventos que permite el componente, funciones especiales o métodos que podemos invocar sobre el mismo, etc. Conviene leer con calma apartado "Overview", que tiene informaciones generales y luego utilizar la completa referencia de opciones de configuración del apartado "Options", así como los eventos y demás.

Nota: Por supuesto que los ejemplos son útiles, pues nos mostrarán casos de uso sencillos sobre los componentes, que podremos utilizar para guiarnos en los primeros pasos con ese componente. Pero en el momento que queramos complicar un poco las cosas vamos a tener que revisar con calma la documentación, pues en ella encontraremos todas las referencias sobre cada componente al detalle.

Definir variables de configuración para el seleccionador de fechas

En el anterior artículo de primeros pasos en jQuery UI ya mostramos cómo cargar un componente de las librerías y vimos el ejemplo concreto con el Datepicker, así que algo ya sabes sobre generar este sistema. En concreto necesitábamos un campo de texto INPUT.

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

Luego invocábamos al Datepicker sobre el campo de texto, con una llamada al método datepicker() sobre el objeto jQuery del elemento campo de texto.

$("#campofecha").datepicker();

Pues bien, para definir variables de configuración de este componente, podemos enviarlas a partir de la llamada al método datepicker(), enviando en notación de objeto todas las preferencias de configuración que deseemos aplicarle.

$("#campofecha").datepicker({
   showOn: 'both',
   buttonImage: 'calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
   onSelect: function(textoFecha, objDatepicker){
      $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
   }
});

Con este listado de variables estamos configurando diversas cosas del elemento para seleccionar fechas, las siguientes:

  • showOn: define que el calendario se muestre al hacer focus en el campo de texto o al pulsar el botón para abrir el calendario.
  • buttonImage: permite definir la URL de una imagen para utilizarla como botón de abrir calendario.
  • buttonImageOnly: para que sólo aparezca la imagen como botón.
  • changeYear: para que haya un campo select con el que cambiar el año actual del calendario.
  • numberOfMonths: para que se vean varios meses a la vez en varios calendarios.
  • onSelect: un evento que se produce cuando el usuario selecciona una fecha.

De todas las variables de configuración anteriores, en las que sólo estamos viendo unas pocas de las que permite el componente, es especialmente interesante el tema del evento onSelect. Al definir un evento podemos realizar acciones Javascript para realizar cosas cuando se produce. Imaginaros que al seleccionar una fecha queréis comprobar cualquier cosa, pues por medio del evento onSelect podríais realizar cualquier tipo de función para ello. Entre los eventos tenemos otros interesantes como onChangeMonthYear, beforeShow, onClose, etc.

Otra cosa importante es que todas las variables de configuración se pueden cargar o bien al instanciar el componente o bien una vez ya está creado el datepicker con el método datepicker(), pasando como primer parámetro la cadena "option", un segundo parámetro con el nombre de la variable a cambiar y un tercero con el valor.

$("#campofecha").datepicker( "option", "changeMonth", true );

Con esa sentencia hacemos que el calendario tenga un select para cambiar rápidamente el mes. (Mirar el ejemplo del final del artículo para más información)

Localización del calendario jQuery UI

Una de las cosas más importantes para nuestro calendario es que esté en español, no sólo por los nombres de mes o de la semana, sino también por el formato de la fecha escrito en el campo de texto una vez seleccionamos un día del calendario.

Para localizar el calendario tenemos que cargar una serie de datos en las opciones del calendario, como los nombres de los días de la semana, de los meses y el formato de nuestra fecha. Todos estos datos podríamos construirlos por nosotros mismos, pero en jQuery han puesto a nuestra disposición un listado de archivos de configuración por idiomas.

Aunque, como decíamos, si no encuentras tu localización, la puedes crear. Para crear la localización tendríamos que definir variables de configuración como monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, etc. El código sería como este, para el idioma español.

/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* Traducido por Vester (xvester [en] gmail [punto] com). */
jQuery(function($){
   $.datepicker.regional['es'] = {
      closeText: 'Cerrar',
      prevText: '<Ant',
      nextText: 'Sig>',
      currentText: 'Hoy',
      monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
      monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
      dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
      dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
      dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
      weekHeader: 'Sm',
      dateFormat: 'dd/mm/yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''};
   $.datepicker.setDefaults($.datepicker.regional['es']);
});

Como se puede ver, se definen unos valores en un objeto $.datepicker.regional['es'] y luego se asigna a todos los calendarios de la página por medio de $.datepicker.setDefaults().

En general es código lo podemos colocar en cualquier sitio o bien copiarlo en un archivo a parte, como por ejemplo jquery.ui.datepicker-es.js e incluirlo con la etiqueta SCRIPT:

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

Ejemplo completo de calendario Datepicker en jQuery UI

Para acabar podemos ver un ejemplo de calendario que tiene varias de las cosas que hemos visto en este artículo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Seleccionar fecha con jQuery UI</title>
   <link type="text/css" href="css/le-frog/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />   
   <script type="text/javascript" src="../../jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
   <script type="text/javascript" src="js/jquery.ui.datepicker-es.js"></script>
<script>
$(document).ready(function(){
   $("#campofecha").datepicker({
      showOn: 'both',
      buttonImage: 'calendar.png',
      buttonImageOnly: true,
      changeYear: true,
      numberOfMonths: 2,
      onSelect: function(textoFecha, objDatepicker){
         $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
      }
   });
})
</script>
</head>
<body>

<form>
   Fecha: <input type="text" name="fecha" id="campofecha">
</form>

<div id="mensaje"></div>


<a href="#" id="cambiames">Mostrar formulario para cambiar mes</a>
<script>
$(document).ready(function(){
   $("#cambiames").click(function(){
      $("#campofecha").datepicker( "option", "changeMonth", true );
   });
});
</script>

</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte.

Lo cierto es que, cuando investigamos un poco este Datepicker, podemos ver que es un componente magnífico, con todas las opciones de configuración y personalización que podamos necesitar. Hablar de todas ellas y presentar ejemplos sería material para un manual entero, por ello, para usos más complejos recomendamos explorar la documentación de jQuery UI, porque probablemente haya alguna cosa que nos haga falta saber y que no hemos explicado en este artículo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Noe

15/6/2010
calendario con enlace
mi pregunta es, al hacer click en un enlace me muestre el calendario, al seleccionar una fecha, esta fecha me la oculte en campo oculto

wilson

25/10/2010
pregunta
De donde sale el parametro textoFecha en:
onSelect: function(textoFecha, objDatepicker)


No entiendo de donde sale ese nombre . Es una variable? donde se define?

pedrolp

22/11/2010
editar el datepicker
muy bueno este ejemplo del datepicker sobretodo porque es util para las fechas... pero hay un detalle mas, he leido la parte en lo que corresponde colocar el datepicker y funciona perfectamente, el detalle es que el recuadro del calendario me parece un poco grande, como podria editar el tamano de este (ancho y altura), me podria ayudar con esto? de todos modos seguire leyendo la documentacion, gracias

albfernan

11/2/2011
rv:editar el datepicker
para ponerlo mas pequeño edita el css y le pones un tamaño de fuente mas pequeño, por ej. 11px y de esta forma se reduce el tamaño en general, queda bastante mejor.

fernando

26/2/2011
rango del año
Amigo como puedo cambiar el rango del año cuando se coloca el changeYear: true ya ves como depredeterminado sale del 2001 al 2021 yo quiero cambiarlo digamos del 1950 al 2015 bueno de antemano grax

jose

02/3/2011
botones
muy bueno el calendario, tambien me gustaria un tutorial para usar los botones del jquery ui, he visto uno por ahi pero esta todo en ingles y mucho texto en ingles me afecta el cerebro :))

jhonny

10/3/2011
varios dias marcados
hola gracias por la informacion, tengo una duda.
como puedo marcar varios dias en el calendario y que no se puedan borrar al seleccionar otros.

como tratar de decir fechas especiales.


gracias

CarlosQ

25/3/2011
Como se que dia se selecciono
¿Como hago para saber que dia se lesecciono , si fue lunes, martes etc ?

martin

25/3/2011
calendario
el calendario´es perfecto justo lo que buscaba ahora lo que sucede esque cuando copio el codigo la imagen no me sale la guarde en el archivo donde esta mi proyecto pera ni aun asi q puedo hacer??

JSequeiros

13/4/2011
Muy bueno
Muy bueno la aplicación...

Super

18/5/2011
Calendario
Como puedo hacer para que al abrir el calendario este me muestre el mes siguiente al mes actual? Gracias

Jesus Charles

22/8/2011
felicitaciones
Estupendo articulo me sirvio de mucho saludos y sigan asi. felicidades

Fredy

27/8/2011
Comentario
Muy buena explicación

Peter

13/9/2011
Como deshabilito un dia en el calendario?
Hola, me gustaría deshabilitar, por ejemplo, los domingos en el calendario... Como lo puedo hacer?

jasmad

12/10/2011
muy bueno el manual
una pregunta cuando se agrega el parametro changeYear:true, el date picker muestra un combo de años pero veo muy pocos como puedo mostrar mas?

Geme

18/10/2011
Duda varias fechas
En el caso de tener varias fechas en el mismo formulario hay que definir una llamada por input o existe alguna forma global de hacerlo, gracias

Veronica

04/1/2012
Datapicker
Muy bueno esto del datapicker, me sirve mcuho... pero quisiera saber si ademas de elegir una fecha se puede hacer tipo agenda... es decir algunos dias marcarlos con otro color por ejemplo y cuando abris poder clikear sobre ellos y que aparezca abajo informacion sobre ese dia...

Gracias!!

Maetschl

24/4/2012
Muy útil
Muchas gracias!

angelsanchezjr

17/6/2012
como quedaria el codigo para mostrar 2 meses a la vez pero dejando escoger solo del dia actual en adelante
hola, deseo saber como hacerle para que el codigo quede para que muestre 2 meses a la vez pero que te deje escoger solo del dia de hoy en adelante y no los dias pasados
Gracias

belenxi

11/2/2013
Seleccionar solo mes y año
Hola a todos, llevo buscando ya bastante tiempo por todas partes alguna manera de poder seleccionar solamente el mes y el año, y no mostrar los días, y no hay manera de encontrar la forma de hacerlo.

Me he leído toda la API del Datepicker y nada...

¿Alguien sabe hacer esto? :-)

marinano

07/5/2013
Que no pueda ingresar en forma manual la fecha
buenos dias, hay forma de bloquear el cuadro de texto para que no pueda ingresar en forma manual la fecha, o sea, que solo pueda ingresar datos en el campo de texto a travez del Datepicker.

Lo inento hacer con la propiedad readonly="readonly" del campo de texto, pero de esa forma no me permite controlar que el campo este completo con el Spry

Desde ya agradezco tu pronta respuesta

Saludos desde menoza

7pps

06/6/2013
Gracias
Gracias me sirvio de mucho!

Zack the apprentice

10/6/2013
seleccion solo mes y año
Bueno quiza un poco tarde pero amigo mio no requiere de leer toda la documentacion para darte cuenta que debes quitarle al formato de fecha los dias dejando solo el mes y el año.

dateFormat: 'mm/yy',

solo debes usar más la logica y comprenderas mejor los codigos, más aun si no son nuestros :)

luis

14/8/2013
desplegable del año en datepicker
Como se hace para que el desplegable del año aparezca desde un año hasta otro? me interesaria que apareciese desde 1930 hasta ahora... gracias

leosanchez

22/9/2013
Cambiar el rango de años que se muestra por default (-10 + 10)
En que propiedad del archivo js se puede modificar el rango? Probé con YearRange y no lo modifica, muchas gracias

Felipe

10/10/2013
posicion del datepicker
Amigos quiciera saber si ustedes me pueden ayudar ya que aplique este datepicker en mi pagina pero al pinchar en la caja de texto se despliega hacia arriba lo malo es que tengo un menu horizontal que se superpone al datepicker les agradesco por su ayuda.

Hernaldo Gonzalez

10/3/2014
gracias
muy bueno gracias amigo!

anthony ramirez

21/5/2014
ayuda con calendario
ola quisiera saber como puedo hacer para hacer operaciones con el calendario, por ejemplo un formulario de reserva d un hotel donde selecciono el tipo de habitacion y luego el dia de entrada y el dia de salida y que al final me diga el precio por los dias que estare en el hotel desde ya gracias

JUAN

17/11/2014
Ocultar calendario
Muy bueno el ejemplo y me ayudo a solucionar mi tarea. Ahora tengo una duda; como hacer para que una vez seleccionada la fecha se vuelva a ocultar el calendario y quede solo el campo de texto con la fecha ingresada. Gracias.
Saludos