Elegir una fecha en un formulario con un calendario y jQuery

En ocasiones necesitamos crear un formulario donde alguno de los campos requieren la selección de una fecha por parte del usuario, por ejemplo para la reserva de la habitación de un hotel, la compra de un billete de tren, etc..

La mejor manera de solicitar una fecha al usuario es a través de un calendario que se despliegue a la hora de introducir la fecha. Es lo que vamos a hacer en este ejemplo.

Para ello vamos a utilizar el plugin jQuery UI Datepicker.

Lo que vamos a conseguir es esto:

Para utilizarlo necesitamos:

1) jQuery, por supuesto:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2) jQuery UI:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

3) En cuanto a estilos, utilizaremos el jQuery UI CSS Framework (esta línea debería ir antes de las dos anteriores en nuestro código):

1	<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />

Y sus iconos:

Si seguimos las instrucciones del plugin, vemos que utilizar el calendario para seleccionar una fecha es realmente sencillo. Sólo hay que escribir, en su forma más básica:

<script type="text/javascript">
$(document).ready(function() {
   $("#datepicker").datepicker();
});
</script>

Siendo en este caso “#datapicker” el id del input del formulario al que aplicamos el calendario:

1	<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />

Como veréis le hemos añadido el atributo readonly para que no pueda ser modificado el contenido del input por el usuario, es decir, que se quede la fecha elegida sin poder alterarla manualmente. Aunque algunos autores lo incluyen, es probable que sea mejor no incluirlo, ya que si Javascript está desactivado no podríamos escribir nada en el input.

Si unís todo el código anterior veréis que el calendario sale en inglés. Para ponerlo en Castellano (también se puede poner en Catalán o en Euskera) tenemos los archivos de localización.

En concreto, para que esté en Castellano:

jQuery(function($){
	$.datepicker.regional['es'] = {
		closeText: 'Cerrar',
		prevText: '&#x3c;Ant',
		nextText: 'Sig&#x3e;',
		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&eacute;rcoles','Jueves','Viernes','S&aacute;bado'],
		dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
		dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['es']);
});

Vamos a unir ya todo el código antes de ver posibles modificaciones. Podéis ver este código funcionando en esta demostración y podéis bajar el código aquí.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Uso de jQuery Data Picker</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$.datepicker.regional['es'] = {
		closeText: 'Cerrar',
		prevText: '&#x3c;Ant',
		nextText: 'Sig&#x3e;',
		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&eacute;rcoles','Jueves','Viernes','S&aacute;bado'],
		dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
		dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['es']);
});    
 
$(document).ready(function() {
   $("#datepicker").datepicker();
 });
</script>
</head>
<body>
<h1>Uso de jQuery Data Picker</h1>
<form action="">
  <label> Seleccionar Fecha:</label>
  <input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
</form>
</body>
</html>

Ahora vamos a ver algunas formas de personalizar el calendario. Muchas de las opciones las hemos utilizado ya en el código de localización. La lista completa está en http://docs.jquery.com/UI/Datepicker

- altField y altFormat nos permiten guardar la fecha elegida en otro campo con un formato diferente, por ejemplo si lo queremos mostrar al usuario con un formato pero que nos llegue a nosotros con otro diferente.

- appendText, si queremos que se muestre un texto al lado del input, para una mejor comprensión para el usuario:

1
2
3

    $(document).ready(function() {
           $("#datepicker").datepicker({ appendText: ' Haga click para introducir una fecha' });
        });

Ver una demo con appendText

-autoSize, si lo ponemos en true se ajustará el input para dar cabida a la fecha introducida.

- numberOfMonths, para elegir el número de meses que van a salir. Si ponemos numberOfMonths:2, por ejemplo, saldrán dos meses. Esto lo aconsejan algunos expertos en usabilidad ya que hay más opción donde elegir de un solo vistazo. Veamos un ejemplo de numberOfMonths , donde se añade al anterior de appendText para ver cómo se unen dos opciones.

- Si queremos que el calendario se despliegue no al hacer click sobre el input sino sobre un botón adjunto (por ejemplo, una imagen de un calendario pequeño, como tienen muchas webs que habréis visto), utilizaremos las opciones buttonImage, buttonImageOnly y showOn:

$("#datepicker").datepicker({ 
   showOn: 'button', 
   buttonImageOnly: true, 
   buttonImage: 'images/datepicker.png' 
});

donde datapicker.png es un icono de un calendario. Al hacer click sobre él, se despliega el calendario. Veamos un ejemplo.

- dateformat, para cambiar el formato en el que se pega la fecha al input. En la demo está en dateformat: ‘dd/mm/yy’. Otra opción es por ejemplo ‘DD, MM, d, yy’ . Lista completa de formatos de fecha.

- maxDate y minDate, para poner una fecha máxima y otra mínima (supongamos que queremos que sólo salgan los meses de Junio a Octubre):

$(document).ready(function() {
   $("#datepicker").datepicker({
       minDate: new Date(2010, 5, 1),
       maxDate: new Date(2010, 9, 30),
       dateFormat: 'dd/mm/yy',
       constrainInput: true,
	});
});

Veamos un ejemplo de maxDate y minDate.

- buttonText, Si queremos que se abra el calendario al hacer click sobre un botón al que le ponemos nosotros el texto:

$(document).ready(function(){
  $("#datepicker").datepicker({ 
       showOn: 'button', 
       buttonText: "Seleccionar" });
 });

Veamos una demo del uso de buttonText.

- showAnim, si queremos cambiar el efecto con el que se muestra el calendario

$(document).ready(function(){
   $("#datepicker").datepicker({
    showAnim: 'fadeIn'
    });
});

Veamos una demo del uso de showAnim. Podemos usar como efecto ’show’ (por defecto), ’slideDown’, ‘fadeIn’, o cualquiera de los efectos para mostrar/ocultar de jQuery UI.

- changeMonth permite mostrar una lista desplegable de meses para poder ir con mayor rapidez al mes deseado:

$(document).ready(function(){
   $("#datepicker").datepicker({
    changeMonth: true 
    });
});

Veamos una demo del uso de changeMonth

Id probando todas las opciones de la página del plugin para ver las distintas opciones.

Por último, destacar una variación aportada por David Walsh en su artículo jQuery UI DatePicker: Disable Specified Days, para desactivar días concretos (por ejemplo, días que hayan sido ya reservados de un hotel y por lo tanto no puedan ser ya escogidos). También en su ejemplo se ve como desactivar los fines de semana y días de fiesta.