Niquelao » acc_calendar: Calendario accesible en javascript (innecesario pero útil)

Niquelao » acc_calendar: Calendario accesible en javascript (innecesario pero útil) Niquelao ¿Cómo dices que te ha quedado? 7 de July, 2007 por Rumoroso —> ¿Accesibilidad y javascript? acc_calendar: Calendario accesible en javascript (innecesario pero útil) Actualizado el 1 de Junio de 2008 , por Rumoroso En los campos de formulario en los que se tiene que introducir una fecha, de cara a mejorar la experiencia de usuario, y a la par que se aumenta el control en el formato de los datos, se puede incluir un calendario mediante javascript. Lo se, palabra maldita , aunque si se hace con cuidado y control, no tiene por qué tener implicaciones negativas en cuanto a estándares y accesibilidad. Objetivos En principio he establecido dos objetivos principales, que más que objetivos han sido pautas de trabajo a la hora de construirlo: Que sea accesible y no obstrusivo. Evidentemente, en ausencia de soporte para javascript no se ofrece la opción de desplegar el calendario, pero, si hay soporte… ¿por qué no hacer que el contenido generado sea accesible y utilizable? Que sea fácil de implementar y utilizar. He buscado una forma tal los programadores que deseen implementarlo en sus páginas web no requieran de introducir código adicional. Al igual que en CSS se utilizan diversos tipos de selectores (de elementos, id, clases,…) para asociar estilos a las diferentes partes de nuestros documentos, ¿por qué no utilizar lo mismo para asociar comportamientos? Además, como objetivos secundarios están: optimizar, generalizar, internacionalizar,… (siendo realista, tuve que eliminar los objetivos de ligar y el de ganar dinero.) Incluyéndolo en nuestros documentos Antes de nada indicar que el script se puede obtener directamente descargando el ejemplo completo . La inclusión del calendario en nuestro documento es tan sencillo como incluir el elemento script correspondiente en el head : El calendario se cargará para cualquier campo de texto que lleve incluida la clase “ fecha “ (si el idioma del documento es el español). El formato de la fecha se introduce en la primera línea del script. Así, si por ejemplo se desea que la fecha siga el orden día/mes/año, no incluyendo un 0 delante del día cuando esté formada por un dígito, e incluyéndolo en el mes cuando sea necesario, y que el formato para el año sean 4 dígitos: var formato = ‘d/mm/yyyy’; Como ya se mencionó, para conseguir mostrar el calendario junto a un campo de texto, este deberá llevar la clase “fecha” si el idioma declarado para el documento es el español (“date” si es el inglés, etc). Estos nombres de clase se pueden modificar, añadir nuevos para otros idiomas, etc., directamente en el script. Además, todos los posibles parámetros se introducen como clases. La lista completa es la siguiente: Cargar calendario (requerido): fecha Fechas previas a hoy: prev Fechas posteriores a hoy: post Rango de años: rangX (siendo X el número de años) No se incluye el día actual: todnact Aplciar filtro para fechas disponibles: disp ¿Y si cargo dinamicamente los input con AJAX? El script tiene la propiedad de que si en cualquier momento se introducen nuevos campos de texto de forma asíncrona con AJAX, bastará con que tras dicha carga se llame a la función cargaLinks() para que a los inputs se les asocien los enlaces para la apertura del calendario Primer ejemplo Fecha futura, en formato d/mm/yyyy , de este año ( class=“fecha post” ) Fecha futura, en formato d/mm/yyyy, de este año sin incluir hoy ( class=“fecha post todnact” ) Fecha de nacimiento, en formato d/mm/yyyy, hasta 100 años ( class=“fecha prev rang100” ) fecha de los próximos 20 años, en formato d/mm/yyyy, sin incluir hoy ( class=“fecha post rang20 todnact” ) Fecha de los últimos 15 años, en formato d/mm/yyyy ( class=“fecha prev rang15” ) Fecha 10 años hacia atrás y hacia delante, en formato d/mm/yyyy ( class=“fecha rang10” ) Nueva Mejora (abril 2007) En ocasiones podríamos desear que la fecha se introduzca en tres campos de texto, uno para cada dato que la compone. Se ha añadido la posibilidad de hacerlo. Para ello seguiremos controlándolo todo mediante el uso de clases asignadas a los input . Para que constituyan un grupo, los tres campos de texto deberán añadir un código que los identifique como tal. Esto, que parece algo raro, no lo es tanto. En realidad, lo que hay que hacer es añadir a la palabra fecha que empleamos como clase en los tres, una letra o un número. Así, por ejemplo, les podríamos aplicar a los tres la clase “fechaA” e inmediatamente, además de asociarse el enlace para la apertura del calendario, se pasarían a comportar como un grupo. Más adelante se incluyen dos ejemplos que lo muestran claramente. Cada uno de los campos deberá llevar una clase en función del dato que se le asocie: Para el campo día la clase “ day “ Para el campo mes la clase “ month “ Para el campo año la clase “ year “ Existe total libertad para el orden en el que se pongan, colocando las clases para la configuración del calendario (número de años, previos, posteriores, etc.) en el primero de los campos que se utilice. En el ejemplo siguiente se podrá apreciar la forma de hacerlo: Segundo ejemplo Fecha de los próximos 10 años en formato día, mes, año: Día / Mes / Año Consideración importante es informar siempre al usuario de cuál es el campo para cada cosa. En el ejemplo se informa en el texto previo y además, las etiquetas de los input lo incluyen. Fecha de los últimos 15 años en formato año, mes, día: Año / Mes / Día Consideración importante es informar siempre al usuario de cuál es el campo para cada cosa. En el ejemplo se informa en el texto previo y además, las etiquetas de los input lo incluyen. Actualización (abril de 2007) Se ha retocado el script para reducir los estilos que se aplican desde este. Ahora, el enlace generado tiene la imagen por contenido (antes esta se cargaba desde la hoja de estilos). El enlace se genera inmediatamente después del input (fuera del label si está incluido en él) y posee el siguiente marcado: En el caso de que sea el enlace para la carga de la fecha en tres campos de texto, la clase del enlace pasa a ser “ enl_cal_group , y este se situa antes del primero de ellos. Actualización (7 de julio de 2007) De

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.