Cuando una aplicación muestra un formulario para que el usuario inserte sus datos, la información más complicada de obtener siempre suelen ser los números de teléfono y las fechas. El motivo es que existen muchas formas diferentes de indicar estos datos. Las fechas por ejemplo se pueden indicar como dd/mm/aa, dd/mm/aaaa, aaaa/mm/dd, dd-mm-aa, dd mm aaaa, etc.
Los métodos más utilizados para que el usuario introduzca la información relativa a una fecha suelen ser un cuadro de texto en el que tiene que insertar la fecha completa (indicándole el formato que debe seguir) o un cuadro de texto para el día, una lista desplegable para el mes y otro cuadro de texto para el año.
En cualquier caso, para el usuario suele ser más cómodo que la aplicación incluya un calendario en el que pueda indicar la fecha pinchando sobre el día elegido:
Además, este método es menos propenso a cometer errores, ya que si el calendario está bien construido, no es posible introducir fechas inválidas y tampoco es posible insertar las fechas en un formato incorrecto.
No obstante, realizar un calendario completo en JavaScript no es una tarea trivial, por lo que no se va a estudiar su desarrollo completo. Afortunadamente, existen scripts gratuitos para mostrar calendarios y que permiten su uso libre incluso en aplicaciones comerciales.
De entre todos los calendarios disponibles, uno de los más completos es el desarrollado por la empresa DynArch, que se puede acceder desde su página web oficial: http://www.dynarch.com/projects/calendar/ y que se puede descargar gratuitamente desde http://sourceforge.net/projects/jscalendar/ El archivo descargado incluye todos los scripts necesarios, su documentación, ejemplos de uso, diferentes estilos CSS para el calendario, etc.
A continuación se indican los pasos necesarios para incluir un calendario básico en cualquier página web:
1) Enlazar los archivos JavaScript y CSS requeridos:
Se descomprime el archivo descargado, se guardan los archivos JavaScript y CSS en el sitio adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/y los archivos CSS en el directorio css/) y se enlazan directamente desde la cabecera de la página HTML.
<head> ... <style type="text/css">@import url("css/calendar-estilo.css");</style><script type="text/javascript" src="js/calendar.js" /><script type="text/javascript" src="js/calendar-es.js" /><script type="text/javascript" src="js/calendar-setup.js" /> ... </head>
El calendario incluye traducciones a más de 40 idiomas, entre los que se encuentra el español. Para mostrar el calendario en un determinado idioma, tan solo es necesario enlazar el archivo del idioma correspondiente. Las traducciones se encuentran en el directorio lang y su formato escalendar-XX.js, donde XX es el código del idioma.
2) Añadir el código XHTML necesario para el elemento que va a mostrar el calendario:
<p>Introduce la fecha pulsando sobre la imagen del calendario</p><input type="text" name="date" id="fecha" readonly="readonly" /><img src="calendario.png" id="selector" />
En este caso, el calendario está formado por dos elementos:
fecha y que almacena el valor introducido por el usuario. Como se le ha asignado un atributo readonly="readonly", el usuario no puede modificar su valor.3) Configurar el calendario:
<script type="text/javascript"> window.onload = function() { Calendar.setup({ inputField: "fecha", ifFormat: "%d / %m / %Y", button: "selector" }); } </script>
Una vez enlazados los archivos del calendario y preparado el código XHTML, es necesario inicializar y configurar el calendario. La configuración del calendario consiste en establecer el valor de alguna de sus propiedades. Las propiedades básicas imprescindibles son:
inputField: se trata del atributo id del elemento en el que se mostrará la fecha seleccionada, en este ejemplo sería fecha.ifFormat: formato en el que se mostrará la fecha una vez seleccionada (en este caso se ha optado por el formato dd / mm / aaaa).button: atributo id del elemento que se pulsa (botón, imagen, enlace) para mostrar el calendario de selección de fecha. En este ejemplo, el id de la imagen es selector.Después de esta configuración básica, el calendario ya puede utilizarse en la aplicación:
1) Aspecto por defecto del selector de calendario:
Al pulsar con el ratón sobre la fecha deseada, el calendario se cierra automáticamente y el cuadro de texto muestra la fecha seleccionada con el formato indicado en la configuración del calendario. Si se vuelve a abrir el calendario para seleccionar otra fecha, se mostrará resaltada la fecha del día seleccionado y no la fecha del día actual.
Ejercicio 59
Mejorar el calendario creado añadiendo las opciones necesarias para que muestre el siguiente aspecto:
Aspecto mejorado del calendario JavaScript
weekNumbers)21 / 08 / 2007 (indicado como %d / %m / %Y). El formato deseado es Martes, 21 de Agosto de 2007 (pistas: %A, %B)<span> (pistas: displayArea, daFormat)