¿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:
<script type="text/javascript" src="acc_calendar/acc_calendar.js"> </script>
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
<input class="fecha post" type="text"
id="fecha1" name="fecha1" value="" />
<input class="fecha post todnact" type="text"
id="fecha2" name="fecha2" value="" />
<input class="fecha prev rang100" type="text"
id="fecha3" name="fecha3" value="" />
<input class="fecha post rang20 todnact" type="text"
id="fecha4" name="fecha4" value="" />
<input class="fecha prev rang15" type="text"
id="fecha5" name="fecha5" value="" />
<input class="fecha rang10" type="text"
id="fecha6" name="fecha6" value="" />
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: / /
<input class="fechaA day post rang10"
maxlength="2" type="text" id="dia" name="dia" value="" />
<input class="fechaA month"
maxlength="2" type="text" id="mes" name="mes" value="" />
<input class="fechaA year"
maxlength="4" type="text" id="year" name="year" value="" />
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: / /
<input class="fechaB year prev rang15"
maxlength="4" type="text" id="otroyear" name="otroyear" value="" />
<input class="fechaB month"
maxlength="2" type="text" id="otromes" name="otromes" value="" />
<input class="fechaB day"
maxlength="2" type="text" id="otrodia" name="otrodia" value="" />
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:
<a title="Desplegar para seleccionar la fecha para fecha"
href="#" class="enl_cal">
<img src="acc_calendar/acc_calendar.png" alt="Calendario">
</a>
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 forma opcional y mediante una consulta ajax se puede aplicar un filtro para que únicamente determinados días del mes esten disponibles como enlaces. Para ello, el script envía mediante el método POST las variables month (mes en forma de número) y year, y este ha de devolver (mediante el lenguaje de servidor que queramos) la secuencia de días disponibles separados por comas. Al inicio del código del script se encuentra una variable (fichero_consulta) donde pondremos la dirección sobre la que resolver la consulta. Aquellos campos en los que queramos aplicar el filtro deberán incluir la clase disp (además de las restantes que ya se han mencionado).
Y como con ejemplos se puede entender mejor:
Fecha de este año (el calendario permitirá la elección exclusiva de días disponibles): / /
<input class="fechaN day disp"
maxlength="2" type="text" id="dian" name="dian" value="" />
<input class="fechaN month"
maxlength="2" type="text" id="mesn" name="mesn" value="" />
<input class="fechaN year"
maxlength="4" type="text" id="yearn" name="yearn" value="" />
* Actualización (21 de octubre de 2007)
Se acaban de incluir dos pequeñas variaciones en el script:
- La posibilidad de que el formato del año sea de dos o cuatro dígitos.
- La posibilidad de que se muestre el día de la semana cuando se ha seleccionado la fecha. Esto es posible si en el documento se incluye un elemento cuya “id” sea “nombre_dia_” más la “id” del campo donde se va a incluir la fecha, en el caso de utilizar un único campo de texto para esta, o la “id” del campo donde se incluirá el día si se emplean tres campos para ello.
Esta última modificación no implica la necesidad de incluir dicho elemento. El script reconoce su presencia si lo hay y en este caso, lo utiliza. No se ha considerado la opción de hacer que el script carge el nombre del día dentro del campo de texto, dado que esto tendría implicaciones en el formato a emplear en el caso de que el usuario tuviese que escribirlo directamente. A continuación se incluye un ejemplo de aplicación.
<span id="nombre_dia_fechaj"></span>
<input class="fecha post" type="text"
id="fechaj" name="fechaj" value="" />
* Actualización (1 de junio de 2008)
Gracias a Gerard y a su aportación, ahora el script para el calendario presenta dos nuevas mejoras.
- El script reconoce si el campo de texto al que se le asocia el calendario es readonly, evitando enviarle el foco al cerrarlo. Previo a esta modificación, en el caso de tener esta característica el mencionado campo de texto, el script podría devolver un error.
- Añadido soporte para el catalán.
Nuevamente le agradezco a Gerard su aportación e invito a todos a continuar mejorando el acc_calendar.
* Estilos enviados por los lectores
Cesar Caballero nos envió un nuevo estilo para el calendario. Si lo queréis utilizar, únicamente lo tenéis que descargar y remplazar por el archívo homónimo.
Gracias por vuestras aportaciones. Podéis enviar los estilos que queráis y aquí los enlazaremos.
Ventajas
Entre las ventajas que se le pueden atribuir tenemos:
- Fácil de usar e implementar.
- No es intrusivo.
- El código y el contenido que se genera es accesible (marcado, organización, contenido,…) y es utilizable mediante el uso de ayudas técnicas (lector de pantalla,…). En este punto se ha tenido en cuenta en qué lugar recae el foco tanto al mostrarse como durante el funcionamiento y al desaparecer. Así, cuando se muestra, el foco recae directamente sobre el selector de años, siguiendo un orden lógico al tabular desde él, y cuando se cierra el calendario (mediante el enlace de cierre o tras haber seleccionado una fecha) el foco recae sobre el campo de texto al que se le había asociado.
- Se facilita la navegación por el mismo independientemente del dispositivo. Se puede navegar utilizando cualquiera de los dispositivos con los que podamos navegar por la web.
- Sus parámetros son fácilmente configurables y su llamada muy simple (mediante el uso de nombres de clase).
- El idioma lo toma directamente del documento padre, pudiendo añadir traducciones nuevas al código. En el caso de no estar declarado el idimoa en el documento (cosa que no debe ocurrir), el español será el que se utilice por defecto. Actualmente, además del español incluye el inglés. Adicionalmente se ha hecho que reconozca si es inglés americano, no porque vaya a cambiar el contenido, sino para cambiar la disposición de los días de la semana (el domingo se coloca primero).
- Los estilos aplicados al calendario se incluyen mediante una CSS enlazada por medio del script, con lo que en ausencia de soporte para este, se optimiza la descarga del documento al no llamarse a dicha hoja de estilos.
- Se han incluido clases de tal manera que se puedan aplicar estilos sobre cualquiera de las celdas de la tabla (días activos, días no activos, día actual), así como estilos específicos para los sábados o domingos.
Conclusión
A modo de cierre… ¿qué se podría decir de este calendario?… pues que “es innecesario… pero útil” y que “no tiene implicaciones negativas en términos de accesibilidad“.
…por cierto ¿qué día es hoy?
Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback con la dirección http://www.niquelao.net/acc_calendar-calendario-accesible-en-javascript-innecesario-pero-util/trackback/ desde tu sitio.
124 comentarios
Muy bueno me ha ayudado bastante en realidad es muy facil adaptarlo, en lo que es Stylos. gracias
maldicion, yo no he podido integraralo en mi formulario, ya cambie rutas de imagenes, ya configuere el .js bien y no sale el puto icono del calendario a un lado de mi textbox, que hago ?
Comprueba sin css si te aparece el enlace junto al campo de texto. En caso afirmativo, es que el script está operando bien y puede que haya algún error en la ruta a la imagen.
También comprueba si todo el marcado es el correcto: recuerda que hace falta un label que se asocie de forma explícita al campo de texto. Puedes comparar el código (tal vez ya lo hayas hecho) con los de ejemplo de esta propia página o incluso partir de uno de ellos para ir adaptándolo a tus necesidades.
Si al final no lo consigues, házmelo saber o pégame/mándame el código que estás utilizando.
Un saludo
Cordial saludo,
te felicito por tu java scritp para el calendario, excelente trabajo, pero tengo problemas con internet explorer, sale el siguiente error:
Linea: 702
Caracter: 3
Error: ‘document.getElementById(…)’ es nulo o no es un objeto
Hola Hanseld y gracias.
Lo cierto es que no tengo claro cuál puede ser el origen del problema que te devuelve ese error. En si, todo parece apuntar a que el script no encuentra el elemento con la “id” reclamada en la sentencia. Revisa el código que has preparado para el script o prueba adaptando uno de los de ejemplo de esta página. Si te sigue pasando, envíamelo al correo y le echo un vistazo. Tal vez sea un error en el código del script o la no consideración de una determinada situación de código en su programación.
Ya me dirás… un saludo
forfavor nose si podrian colaborarme con el codigo lo necesito gracias
Dinos lo que necesitas y veremos lo que se puede hacer…
Hola:
Gracias por el script, pero en realidad lo que necesito es que se muestre tambien junto al formato dia/mes/año un campo nombre_dia, ya qye necesito implementarlo de esa forma. Por ejemplo: si hoy es viernes 19/10/2007, el script contendria: nombre_dia, dia/mes/año.
En realidad debo implementarlo para establecer fechas futuras, indicadas por el nombre del dia. Fecha actual: viernes 19/10/2007, si selecciono martes, deberia mostrarme martes 23/10/2007 . Bueno, espero no haberlos aburrido, y si me pueden hecar una manito desde ya se los agradezco infinitamente.
Muchas gracias..
Hola Fabian.
He preparado una modificación que tal vez te pueda servir. Si quieres que se muestre el nombre del día, podrás hacerlo incluyendo un elemento, por ejemplo un “span” cuya id sea “nombre_dia_” más la “id” del campo donde se va a incluir la fecha si sólo se utiliza uno para esta o la “id” del campo donde se incluirá el día en el caso de dividirla en 3.
Comprueba si va bien y/o si te sirve.
Un saludo
Hola,rumoroso,he visto tu gran trabajo,pero quería preguntarte una serie de cuestiones. la primera,para una fecha me sale bien,pero cuando copia el mismo codigo para poner otra fecha..me salen cosas muy raras..
es decir yo hago para una fecha de inicio y me sale bien,pero a continuacion pongo:
fecha fin: y pongo otra vez el código y me sale la palabra calendario muchas veces y el logo o la imagen del calendario no me sale,es decir que no sale la imagen.
Me puedes ayudar?
Hola,ya arregle todo lo que decía en el ultlimo post,pero ahora existe el gran problema …
En explorer no va igual…es decir Calendario no lo puedo seleccionar porque ni sale…
Me puedes decir,porque es?? un saludo espero respuesta. pacorubio77@hotmail.com
Hola Paco
Me imagino que el origen de los problemas planteados en tu primer mensaje sería algo relacionado con el uso del mismo código tanto para el label como para el input de ambas fechas, incluyendo el mismo identificador. El calendario se asocia al campo con la “id” que le corresponda, la cual ha de ser única para respetar la gramática y tener el código válido. Si esto no se cumple, el script no se comportará como debe. Lo de que la imagen no aparezca puede deberse a la ruta incluida para dicha imagen.
Para comprobar cuál puede ser el motivo por el que lo que estás intentando hacer no sale en InternetExplorer necesitaría que me pasases una URL sobre la que averiguarlo, es decir, un ejemplo de lo que estás intentando hacer. En principio el calendario si debería funcionar correctamente sobre IE, pues como podrás ver y comprobar, los ejemplos que se incluyen en este mismo documento si lo hacen. Pudiera ocurrir que exista una situación de uso que no me haya planteado al preparar el script y que esa sea la causa, pero para ello tendría que ver esa supuesta situación.
Un saludo
Hola.
He intentado integrar el script a un formulario muy basico, cin estilo css, y no he podido. ¿Qué estoy haciendo mal?
En el head estyo copiando la linea del script, y subo en al misma carpeta por ftp la carpeta acc_calendar. Ademas tambien pongo en class fecha y los parametro spara que s emuestren pero aun asi nada.
¿Debo de hacer algo adicional? Agradeceria que revises mi script, al verdad soy muy nuevo en esto de la programacion web y no se mucho, aun estoy aprendiendo. Gracias.
http://200.6.155.47/~osukaru/kawaii/phpfmira/reserva1.php
He subido el index.htm que viene incluido en el .zip al mismo server, y parece que funciona bien…
La verdad no se que estoy haciendo mal, seria de mucha ayuda si lo revisas… gracias…
http://200.6.155.47/~osukaru/kawaii/phpfmira/index.htm
Hola FMira.
He revisado el código de tu documento y el problema es que las etiquetas “label” no se están asociando de forma explícita con sus correspondientes controles de formulario. Para hacer la asociación explícita tienes que incluir el atributo “for” en la etiqueta y darle como valor el “id” del campo asociado. Échale un vistazo al código del documento de ejemplo o incluso a este mismo documento y podrás ver cómo se hace.
Te comento que esto, a pesar de ser necesario para que el script funcione correctamente, no es algo que el script imponga. Es una medida de accesibilidad y un requisito WCAG.
Un saludo
Muchas gracias pro la ayuda, Rumoroso, ha servido a la perfección. El codigo lo generé automaticamente con Dreamweaver, y pue sel mismo no asociaba los labels con cada input. mucha gracias pro la ayuda, el script funciona a la perfección.
Saludos…
Tengo un inconveniente, estoy trabajando con Dreamweaber, y he generado una pantalla que tiene 4 div, lo que sería:
(div) [(div)head(/div)] [(div)menu(/div)][(div)principal(/div)] [(div)pie(/div)] (div)
Los formularios se posicionan en (principal), aparece correcto el botón del calendario, pero el calendario apacece corrido, en una posición que se ve la mitad, y sobre el div del menu.
No estoy muy familiarizado con el uso de css y div para ubicarlos y darles tamaños a los contenedores (creo que ese es el problema jajaja)
Cual es el parámetro que debería modificar para poder ubicarlo? http://190.18.209.38/cconocimiento_local/estilos/untitled.php (aparece correctamente) http://190.18.209.38/cconocimiento_local/admin/index.php?funcion=evento (aparece desplazado)
He cambiado dentro del archivo css lo siguiente: #bio_calendar { position: relative ! important; } y ha quedado bien. Ahora me encuentro con otro error, cuando selecciono el mes Enero en el campo select, y presiono el año siguiente, no aparecen los dias…
Tengo que agradecerte por tu trabajo, es genial!!!
Hola Dario y gracias por los comentarios.
He revisado el script. Si no me equivoco, tenía un error que creo haber solucionado. Me gustaría que lo probases de nuevo y veas si ya está. Sobretodo, gracias por ese feedback que sirve para arreglar los problemas que no se hayan detectado previamente. Al final, lo estamos construyendo entre todos.
Lo dicho, gracias y comprueba si ahora va bien.
Ha quedado perfecto!!! Muchas gracias por todo, tu trabajo es muy bueno!!!
No me queda claro como insertar el calendario.
Resulta que tengo un formulario con estilos de los campos de texto ya definidos por mi y que ademas la fecha se ingresa en campos separados en este formato dd para el campo de dia, mm para el campo de mes y yyy para el de año.
Por favor alguien podria decirme como insertar este calendario y cambiar los estilos.
Hice lo de colocar la imagen del calendario a un costado de los campos y cambiar el nombre de clase, en esta ultima accion me cambia los estilos de los campos.
Por favor ayuda.
Grax.
Logre que me apareciera el calendario, pero ahora no logro que aparezca la foto del calendario, trate con el enlace que pones de ejemplo y la funcion cargalink() sobre el mismo enlace y cuando lo presiono me aparece otro enlace al calendario sin foto el cual si lo presiono hace que me aparezca el calendario pero en la misma ventana del navegador haciendo que el formato de la pagina se desforme.
Todavia no resuelvo el tema de los estilos.
Grax
Esta muy bueno el script pero aun no lo entiendo.
Hola Daniel. En realidad no tienes que hacer gran cosa para hacer aparecer el calendario. Te recomiendo que revises bien el código de los ejemplos de este mismo documento. Fíjate en el código fuente y revisa el marcado empleado tanto para los input como para los label.
Date cuenta también de que no es necesario que cambies las clases que ya tengas sobre los campos y que estés utilizando para aplicar estilos. Lo único que tienes que hacer es añadir las clases nuevas separadas por espacios.
Si a pesar de todo no lo consigues, pon un enlace a un ejemplo de lo que llevas hecho, o a algo parecido a lo que quieres hacer, y te lo miro. Verás que al final es más facil de lo que piensas.
Respecto a lo de que se descuadre por aparecer en la misma ventana del navegador, te comento dos cosas. Por un lado, la idea es esa, que aparezca en la misma ventana del navegador y no abra nuevas, pues esto ocasiona importantes problemas de accesibilidad. Por otro lado, el que se te descuadre puede deberse a conflictos con las hojas de estilo. Date cuenta que la posición que adopte el calendario se basa en estilos aplicados con CSS, con lo que pudiera estar sobreescribiendose alguno de los estilos que este lleva por defecto. Insisto en que si pones un ejemplo puede que sea más facil comprender qué es lo que te está pasando.
Un saludo
Hola,
Antes que nada muchas gracias por responderme.
Hasta ahora he avanzado bastante, ya logre cargar el calendario y modificar los estilos.
Pero tengo los sgtes. problemas: la ventana que se abre con el calendario no se despliega bien, los campos de la fecha se desaparecen y la imagen del calendario se corre hacia la derecha, te dejo el enlace para que entres y lo veas tu mismo.
www.iso-biggi.cl/Nueva%20ISO/ing_reunion.shtml?id=3528&pag=1&cod=0&or=0&t=314898356
Por favor haber si me puedes ayudar.
Nuevamente muchas gracias
Bye
Buenos días de nuevo Daniel. Me puse a revisar el enlace y lo primero que vi es que no se estaba cargando la hoja de estilos por defecto para el calendario. Ese es el motivo por el que se desplaza el contenido, pues la CSS es la que le saca del flujo del documento.
Me puse a revisar y he detectado el problema. El problema radica en que has utilizado el evento “onload” directamente sobre el body, sobreescribiendo el mismo evento procedente del script. De ahí que no ocurriesen las dos cosas básicas, es decir, la carga del enlace y la carga de los estilos.
Hay dos formas de solucionarlo. Una de ellas sería revisar si realmente necesitas ese “onLoad” del body. Comprueba si eliminándolo se pierde algo y de no ser así, yo lo borraría. Al hacerlo, el script pasará a funcionar correctamente (haz la prueba). La otra forma también es sencilla. En el script hay una función al final que permite asociar todas las funciones que quieras al evento onload. Si lo editas y le añades la función que tu has incluido en la etiqueta “body” lo tendrás solucionado. Lo que tendrías que añadir es únicamente lo siguiente:
addLoadEvent(MM_preloadImages(’Img/Tabla/celda3_sobre.gif’));
Si añades esa línea y eliminas el “onload” del body lo tendrás solucionado.
Y lo dicho, yo miraría si realmente necesitas esa función.
Espero que ahora te funcione. Quizás debería avisar en el artículo que no se debe utilizar el evento onLoad directamente sobre los documentos, ya que anulan el del script, y que en el caso de utilizarse, se haga añadiendo lo que te comenté sobre un script.
Un saludo
Una última cosa Daniel que no tiene que ver con el funcionamiento del script. He visto que los label los incluyes pero sin contenido. Te comento que eso no es del todo correcto, insistiendote en que no tiene que ver con el script. No es una crítica destructiva, sino todo lo contrario. Si lo que quieres es que no se muestre texto, tras añadirlo, lo puedes ocultar con CSS.
Un saludo
Muchas gracias Rumoroso, era exactamente lo que decias ahora funciona excelente.
Efectivamente el evento OnLoad en el body anulaba el script, pero lo saque y listo, funciona correctamente.
Respecto a la etiqueta Label, no comprendi mucho lo que me escribiste, en serio es la primera vez que los uso y solo porque estaban en la pagina de ejemplo, pero me gustaria si puedes, me explicaras que pasa si incluyo los label sin contenido y como se componen.
Muchas gracias nuevamente y te felicito por el script, como lo dije antes esta de pelos, jejeje.
Nos vemos
Bye
Hola de nuevo Daniel.
Respecto a la etiqueta label, te recomiendo que revises lo que dice la especificación[1] para que comprendas su función y utilidad. Se puede decir que resulta obligatoria en aquellos campos de formulario que no la tienen de forma implícita, siendo un requisito de accesibilidad ([2] y [3]). En base a esto, no sólo ha de incluirse el elemento en si, sino también tiene que tener contenido, pues en caso contrario no podría cumplir su función.
Espero que te sirva de ayuda.
Un saludo y gracias por tus comentarios.
Buenas, estoy implementando tu calendario para efectos de una intranet y esta muy bien. Mi problema es que cuando inserto mas de dos calendarios en un mismo formulario, no me muestra el icono de desplieque del mismo en las otras opciones, no se cual es mi error. estoy utilizando class=”fecha rang10″ para todos, en el formulario que estoy realizando ahora, debo colocar 5 fechas. Hasta pronto.
Hola Alexander.
Comprueba que los “id” de cada campo de texto son únicos y no estás empleando el mismo en todos los casos. Es decir, cada “id” debe ser único, no pudiendo repetirse en el mismo documento. Luego, el label que asocies a cada campo de texto deberá incluir en su atributo “for” el valor del “id” del campo al que se asocia. Compruebalo en los ejemplos que he preparado.
Si este no es el origen del problema, lo que puedes hacer es poner un enlace con tu formulario (o uno similar), o si lo prefieres, envíalo al correo. Es mejor lo del enlace, pues así compartiremos entre todos los conocimientos y posibles mejoras que vayamos detectando.
Un saludo y ya me dirás si se te ha arreglado.
Buenas, pues que pedaso de calendario, lo mejor que he visto por estos lares, solo le falta enviarme un sms cuando alguien clicke. Pues estoy tocandolo un poco para una intranet y necesito algo como lo de todact pero para mañana. Es decir que no se pueda elegir ni hoy ni mañana, solo a partir de pasado mañana. Tambien me gustaria que (ademas de añadir esta nueva funcionalidad al calendario) me explicases un poco como hacer esto último ya que soy muy curioso y me he leido varias veces todos los archivos pero hay zonas donde me pierdo.
Por ciero, podrías poner que este calendario es beerware, por lo menos que la gente se pague unas cervesas.
Hola,
Muchas gracias por el calendario!!!
He hecho una pequeña mejora, y te la quería comentar por si te interesa.
Mi problema es cuando edito un registro que ya viene con la fecha cargada, y, en el calendario siempre me muestra la el mes y año actual. No sé si hay alguna clase para que pille la fecha del input asociado… he estado mirando el js, pero no he visto nada, así que, las modificaciones que he hecho, son sobre la línea 210 (aprox) de acc_calendar.js
////////////////////////////////////////////////////////// if(elasociado.value!=''){ var Mi_fecha=elasociado.value.split('/'); //supongo que esta en d/m/Y if (Mi_fecha[1]>0) Mi_fecha[1]= Mi_fecha[1]-1; var Fecha_inicial=new Date(Mi_fecha[2],Mi_fecha[1],Mi_fecha[0]); }else{ Fecha_inicial=Hoy_real; } enl_cal.setAttribute('href','javascript:calendario(' + cons_disp + ',' + todact + ',' + Fecha_inicial.getMonth() + ','+Fecha_inicial.getYear()+ ',"","' + dest +'",' + rango + ','+ Fecha_inicial.getDay()+')'); //////////////////////////////////////////////////////////Un saludo.
Hola Arantxa y gracias por tu aportación. Me parece genial que entre todos poco a poco vayamos haciendo que el calendario mejore, tanto desde el punto de vista de la funcionalidad que ofrece, como desde la presentación del mismo e incluso, con vuestras opiniones.
Un saludo
He combinado el calendario con un comprobación en php que utiliza dos calendarios diferentes:
Uno si desde las 00:00 hasta las 16:00 y otro desde las 16:59 hasta las 23:59 (en php es sencillo)
Pero me he dado cuenta de que al estar todo funcionando en javascript, si el ordenador tiene la hora/dia/fecha mal, el calendario no funcionará adecuadamente.
Pregunta: ¿No sería bastante mas útil que el calendario coja la fecha actual con una llamada a un archivo/función en php? ¿ Este caso, por donde puedo empezar, que me he liado un poco con el js y no he visto la luz?
Hola Pedro. Lo que dices es totalmente cierto, pues la fecha la está cogiendo directamente del ordenador en que se ejecuta, con lo que si esta no está bien…
Respecto a lo de cojer la fecha actual directamente de un servidor, por ejemplo mediante AJAX, es una buena idea. Mediante un pequeño script en php se puede hacer que se le devuelva de forma asíncrona la información a nuestras funciones para que operen con la fecha correcta. El único inconveniente que esto tiene es precisamente el hacer una petición nueva al servidor perdiendo un poco de la eficacia que tiene el funcionamiento en el lado del cliente. Digamos que deberíamos sopesar si compensa hacer esa petición extra al servidor frente a cogerla del ordenador cliente, teniendo en cuenta que de forma generalizada, en la mayor parte de los casos, si será la correcta.
A favor de hacer la petición al servidor tendríamos el que únicamente hace falta hacerla una vez al cargar el documento, con lo que tampoco tendría porqué llegar a notarse una posible falta de eficacia.
Voy a revisar el script y ya te digo por donde podemos tocarlo. Si te animas, te comento que hay dos variables que manejan la fecha a lo largo de este. Una de ellas es “Hoy_real” y la otra “Hoy”, con lo que si quieres ir mirándolas y tratando de integrar una petición mediante AJAX para que se carguen las fechas… adelante, pues creo que sería interesante ponerse a ello. Ten en cuenta que además de esas dos variables, aparecerán una serie de funciones que se encargan de extraer los diferentes elementos del objeto “Date”, con lo que es posible que tengamos que revisarlo. Por último, también hemos de recordar que si por cualquier motivo, la consulta al servidor devolviese algún error, tendríamos que compensarlo cargando la fecha del ordenador cliente.
Lo dicho, cuando tenga un rato me pondré a mirarlo, pero si tu te animas a ello, ese tiempo que va adelantado.
Un saludo
Estoy creando un CMS algo personalizado con javascripts, funciones, etc… y me he dado cuenta que en aquellas pantallas que se combina el calendario y cualquier sistema tipo lightbox falla la carga del calendario, es decir, no se muestra la imagen para usarlo.
La cosa viene porque el lightbox se carga desde el body mediante un onload y si incluimos el js del calendario antes, este falla, sin embargo, si lo incluimos dentro del body funciona. Yo no soy partidario de este sistema, pero tras hacer varias pruebas solo he podido encontrar esta solucion.
Lo comento porque seria interesante evitar este tipo de comportamientos. ¿Tal vez usando la fucion cargaLinks ( aunque no sé exactamente donde colocarlo )?
Hola Phillipo. En principio el problema es que el script del calendario incluye la función (llamada addLoadEvent) que provoca la carga de los enlaces para los calendarios asociándola al evento onLoad. Cuando incluyes dicho evento en la etiqueta “body”, desaparece el comportamiento de aquella función. Revisa el código del script y verás que al final de este se incluye la función que te estoy mencionando y luego un par de líneas que permiten la ejecución de otras tantas funciones en el evento mencionado.
Para evitar el comportamiento anómalo, puedes pasar el argumento que incluyes en el atributo onLoad del body al script del calendario añadiendo una línea equivalente a las que antes te mencioné. Por ejemplo:
addLoadEvent(miFunc());
Esto añadiría la función “miFunc” al evento onLoad.
Espero haberme explicado bien. Revisa los comentarios de este artículo y verás que hubo otra persona a la que le pasó algo parecido, siendo una de sus posibles soluciones la que te comento (revisa mi respuesta del 25 de Noviembre).
Un saludo
Buah!!! de muerte, gracias por la solución, creo que de todos estos comentarios se podria crear un FAQ o un leed antes de preguntar….
Sale mal el mes de febrero, en vez de empezar el viernes empieza el sabado el dia 1
Gracias Josh. Parece que hay un bug cuando el año es bisiesto. Lo revisaré y lo trataré de arreglar.
Me huele que se ha colado el dia 0 por algun sitio pero no lo veo claro. Igual si anulas lo de dias bisiestos y cuando funcione todo lonyades. De todas formas avisa cuando lo tengas apaao un saludo
Es curioso que el mes de febrero adelanta por un dia y el mes de abril por dos, y junio y septiembre tambien fallan (tambien es curioso que navegue con links pero eso es una historia mas larga)
No he tenido tiempo de ver el porque del error, pero he podido parchearlo para que no falle este año.
El error parece estar en el valor de Comienzo, en el original es a partir de la linea 321, he añadido estas lineas:
Comienzo = PrimerDia.getDay();
if (Hoy.getMonth()==1) { Comienzo = 5;
}
Se que esta no es la solución, la solución es averiguar porque falla y solucionarlo realmente.
Te toca Rumoroso, que tu seguro que conoces el calendario al dedillo.
hola:necesito saber como hago para cambiar el tamaño del calendario. Me funciona de 10,incluso cambie los estilos pero no puedo hacer q me aparezca mas pequeño.gracias
Hola Maria. Me alegro de que el calendario te sirva. Para reducir su tamaño lo único que tienes que hacer es modificar la hoja de estilos. Busca el selector “#bio_calendar” que es el identificador del contenedor del calendario. Allí está definido el ancho del mismo, que en el estilo que he definido son 300px. Además, allí puedes cambiar el tamaño de la fuente y reducirlo, con lo que el resultado es un calendario más pequeño.
Si ves que no va, me lo dices y te ayudo.
Un saludo.
Gracias Josh y Pedro por avisar. Lo voy a revisar y buscar el problema. Es curioso, pero ahora parece que funciona bien. No obstante lo revisaré buscando el posible origen de lo que está pasando y tratando de evitar que vuelva a pasar.
Un saludo y gracias.
Hola encuentro super util tu calendario; queria preguntarte, es posible que el calendario quede constantemente fijo.??? y si, si, como??
Hola Carlos. Gracias por tu comentario. Cuando dices lo de dejarlo fijo, ¿a qué te refieres exactamente?
Me refiero a que, el calendario se despliega y se oculta cuando das click en el icono, pero si siempre necesito fijo, y desplegado el calendario?? se puede??, como??
necesito hacer un calendario sin imput ni cosas por el estilo en una pagina de html a ver si alguien me puede ayudar
hola, antes que nada te doy un cordial saludo y te felicito por el script.
mi problema es el siguiente, he seguido todas la instrucciones y explicaciones que colocaste en este foro y no he podido hacer que se muestre el calendario al lado de mi textbox, inclusive ya he comparado el codigo de esta página con mi codigo, tambien soy un poco nuevo en esto, lo que si te puedo comentar es que cuando trate de abrir el script con dreamweaer para ver el codigo me produjo el siguiente error:
c:\wamp\acc_calendar.js linea:68 caracter:1 error:’document’ no está definido codigo:800A1391 origen:error en tiempo de ejecución de microsoft jscript
espero haberme explicado bien, si me puedes ayudar a resolver este problema te lo agradeceria en el alma, estamos en contacto…
hola, creo que ya resolvi el problema, pero ahora tengo otro problemilla, el calendario en vez de aparecerme a un lado de mi textbox como en el ejemplo me aparece abajo y me muestra la palabra calendario como un link debajo de mi textbox y el calendario se me abre pero a un lado de la pantalla y no se ve de forma completa, jejeje, agradeceria nuevamente tu ayuda….
Responderé por partes:
Para Carlos: En principio, si lo que quieres es que el calendario permanezca siempre visible en la página, entiendo que lo más sencillo sería crear el calendario directamente en el código. Si luego pretendes que al pulsar en un día determinado, un campo de texto se actualice, lo mejor sería construir directamente un script para ello más que el reutilizar el del acc_calendar. Dime si es a esto a lo que te refierías cuando me preguntabas…
Para Gema: Lo que necesitas es algo tan sencillo como crear una tabla de datos. Recuerda emplear el marcado correcto para ello. Por ejemplo, revisa el que está incluido en el apartado “Buscar en el BOPA” de www.asturias.es
Para Agustín: Comentarte dos cosas.
Un saludo a todos. Esto mola, porque con vuestras aportaciones todos salimos ganando.
por lo del script no te preocupes, creo que era un problema más del windows y no de tu script, con respecto, el formulario que he desarrollado y donde se encuentra mis textbox si esta colocado en un tabla, los Css se me cargan correctamente, igualmente te voy a enviar mi codigo para que lo revises y me puedas echar una mano:
Cotizaciones
Nombre:
Apellido:
E-mail:
Telefono:
Fecha:
Categoría:
Boda Religiosa Boda Civil Bautizo Bar-Mitzva Brit Milá Primera Comunión 15 Años Modelos Embarazo Estudio Fotográfico Corporativo Aniversarios Cumpleaños otros
Hola Agustín. Al pegar el código en el formulario de envio de comentarios, las etiquetas se han eliminado. Lo mejor sería que pusieses el código en una página de ejemplo y mandases el enlace para poder verlo.
Un saludo
hola nuevamente, ya pude solucionar el problema que tenia con el calendario, el problema se encontraba en los div, no estaba trabajando con ellos pero recientemente los empece a utilizar en mi formulario, el unico detalle ahora es que aun no me esta colocando el calendario al lado de mi textbox, no me esta mostrando la imagen, lo sigue mostrando con un link, te queria preguntar si sera la ruta de la imagen que no se esta copiando correctamente en el formulario?, gracias…
Un peligro muy grande es que el ordenador tenga la fecha mal, entonces el calendario deja de funcionar correctamente. Con solo adelantar un dia, no funciona correctamente.
Hola de nuevo Agustín. En principio, por lo que cuentas, parece que la ruta a la imagen no es la correcta. Revisa el código y mira si lo es, pues todo parece apuntar a que el problema está ahí.
Jose, con respecto a lo que comentas, está claro que si es un posible inconveniente, pero también es cierto que es algo que tal vez si podamos asumir. En el caso de que la fecha del ordenador en el que se muestre el calendario no sea la correcta, el principal inconveniente es que el día actual estaría desplazado. Pero no obstante, el calendario sigue funcionando correctamente. Es algo que si se quiere usar un calendario en javascript y de estas características se ha de asumir. Más problema será para el usuario si, teniendo la fecha mal del ordenador, la toma como correcta, independientemente de que use o no el calendario.
Un saludo
Ante todo, felicidades por tu magnífico trabajo y gracias por aportarlo de manera tan altruista y desinteresada.
Lo he implementado en un nuevo proyecto y su utilidad es increíble, ya que tengo que controlar casi 30 campos de fechas y con el acc_calendar me he ahorrado un montón de validaciones y comprobaciones. Gracias.
Pero… Hay un pequeño problema que no consigo solventar. Todo va de maravilla, tanto en Firefox como en IExplore7, pero en IExplore 6, los menús desplegables se colocan por encima del calendario. He cambiado las propiedades de z-index, pero sigue igual. ¿Alguna sugerencia?
Agradecido, Eulate
como puedo realizar un calendario que me pueda colorear un rango de fechas entre fecha inicial y fecha final y que la fecha la pueda cojer de untextfield.
agradecido por la colaboracion.
hola super tu codigo, pero no he podido hacer de ninguna forma que me aprezca la imagen del calendario unicamnete me aprece el link css para acceder al mismo Gracias si me pudieras ayudar
Responderé por partes:
Eulate, no tengo muy claro el origen del problema. Si puedes, mándame o enlaza un ejemplo para que lo pruebe y así decirte algo.
Rafael, entiendo lo que quieres conseguir, pero en este caso, indicarte cómo hacerlo es lo prácticamente como hacer uno de nuevo, y en principio, no creo que sea lo más adecuado. Tienes que tener la idea clara de lo que quieres construir y animarte a ello, pues por el momento, el acc_calendar no tiene mucho que ver con lo que pides.
Diana, está claro que el problema es que no se encuentra la ruta a la imagen. Te aconsejo que utilices una herramienta del tipo Firebug para firefox, que te permite ver el código generado. Ahí podrás ver la ruta que tiene la imagen y comprobar dónde está el problema. Si quieres, puedes ponernos un enlace al documento que tengas creado (o a uno de ejemplo), para que pueda comprobartelo yo mismo.
Un saludo a todos
hola descargue la herramienta pero no me muestra la ruta de la imagen q tengo alli, la cambie y no me toma el cambio, sigue con a misma el codigo q engo es del ejemplo […]eliminado el fragmento por el sistema[…]
Hola Diana. He tenido que eliminar el fragmento de código que pusiste porque resultaba imposible de descifrar (el sistema de comentarios eliminó fragmentos). Por eso, te recomiendo que mejor incluyas un enlace al documento que estés creando (o a uno similar que sirva de ejemplo) y así podré mirar lo que ocurre.
Un saludo
Hola, antes que nada felicitarte por este script, es de lo mejor que he visto por internet, y mira que he buscado y usado muchos.
La única pega con la que me he encontrado es que no se visualiza bien el calendario en IE5.5 ni IE6.0. Los campos de texto y comboboxes de mi formulario aparecen por encima del calendario. El código lo tengo validado y libre de errores. Supongo que será algún problema de CSS pero no sé como arreglarlo.
Hola Antonio. Gracias por tu comentario. En principio, lo más probable es que si sea un problema de CSS y de la forma tan personal en que nuestro amigo IE las interpreta. Si quieres puedes poner un enlace a un ejemplo de lo que estés haciendo y entre todos lo revisamos.
Un saludo.
esta bueno el calendario, gracias por compartirlo
Gracias Dolores. La idea es que el calendario pueda ser util, tanto para los que desarrollan, como para los usuarios de nuestras páginas.
Un saludo
Wolaaa mi problema es k m sale todo todo bien… pero cuando le doy al boton del calendario y consulto el error en ele xplorer m sale k falta el objeto.. kreo k es k tengo k krear el objeto… :S:S:S:S: tengo todo bien echo incluso hace la llamada al metodo Calendario pasandole parametros.. agradeceria la ayudaaa
yo de nuevo… lo siento… lo k necesito es crear el objeto de la clasee del calendario en cuestion.. sino m ekivoko.. pero como lo kreo? xk para krearlo ace falta el nombre de la clase y nose cual es.. :S soy nuevo en javascript y la verda llevo dias pa sakar lo del calendario yo solo y ya no puedo mas jeje
aciassss!!
Primero que nada te felicito por la pagina.
Escribo es por el siguiente problema, estoy haciendo una pagina de cursos y necesito colocar la fecha de inicio y de culminacion, pero cuando coloco el mismo calendario dos veces en la misma pagina no se carga bien, sera que lo estoycolocando de una forma inadecuada?.
De ante mano Gracias
Tanto en respuesta a Chapulin como a Carls, comentaros que quizás lo mejor sería que enviaseis un ejemplo de lo que estáis haciendo. Lo más probable es que haya alguna clase errónea, o quizás falta algún elemento (recordar asociar cada input con su label, tanto de forma explícita como implícita), o incluso, alguna “id” pudiera ser que se esté repitiendo.
Poniendo un enlace a un ejemplo de lo que estáis haciendo (no tiene porqué ser lo que estáis haciendo, sino un ejemplo equivalente, sólo con la parte del formulario para la fecha) os lo miro y os comento.
Un saludo
Hola, he utilizado el calendario y va estupendo, gracias por compartirlo!
Y ahora los problemas que he tenido por si ayuda a mejorar. En la funcion cierra, cuando asignas el foco, yo he puesto el label con la propiedad disabled=”disabled” por motivos de que el usuario no se equivoque en el formato, al estar disabled, no deja asignarle el foco y peta el script…
Tambien he necesitado hacer la traduccion de los textos al catalán, y he modificado el código para añadirlo como nuevo idioma en los arrays… si te interesa tenerlo hazmelo saber (no encuentro tu email por ningun sitio :S)
Un saludo!
Hola Gerard. Si que estaría bien poder compartir los cambios, especialmente cuando son mejoras. Mi correo es rumoroso@niquelao.net
Un saludo y gracias
Hola Gerard soy nuevo en esto me podrias ayudar, puedes compartir el código con las mejoras que le has hecho mi correo es gonzipbx@hotmail.com, GRACIAS..
Hola,
Rumoroso: te he mandado al correo los cambios
Gonzalo: como comento le he pasado a Rumoroso el código, dejemos que el lo revise y si lo cree oportuno lo cuelgue con las modificaciones.
Saludos.
Acabo de incluir las mejoras que Gerard me envió. Y ya sabéis, cualquier mejora y/o sugerencia será bienvenida.
Un saludo
Por favor necesito me expliquen como debo utilizar este script, tengo que cambiar las rutas, la verdad la la baje los archivos, cree un formulario llamado fechas.php donde digito:
Lo jecuto en el explorer pero me muestra el textbox pero no me muestra el icono del calendario
Les agradezco inmensamente su ayuda
Lo quiero adaptar a un formulario donde necesito la fecha de nacimiento para llevar los datos del textbox a un campo de mysql
Hola Miguel, gracias por tus palabras.
Para utilizar el script, debes hacer una serie de cosas: 1º. Enlazarlo en el elemento HEAD del documento de la forma habitual. 2º. Editar el archivo acc_calendar.js. Verás que en él, prácticamente al comienzo, hay un par de variables:
var fichero_consulta = ‘../acc_calendar/days.php’; var dir_imagenes = ‘../acc_calendar’;
La primera sólo la necesitas si vas a permitir que únicamente determinadas fechas del calendario estén disponibles (revisa el artículo y ahí lo explico). La segunda es la ruta dónde han de estar la hoja de estilos para el calendario,la imagen que aparecerá junto al campo de texto y que permite desplegar el calendario, etc.
Una vez hecho esto, sigue los pasos que aparecen en el artículo para conseguir que el calendario se muestre y asocie a los campos de texto que tu desees. Verás que la forma de conseguirlo es mediante el uso de clases asociadas a las etiquetas LABEL (que a su vez se asocian con los INPUT en cuestión).
Esto es muy a grandes rasgos la forma de enlazarlo y hacer que funcione. Si ves que no lo consigues, dímelo.
pdta: puede ser que lo consigas pero que en lugar de ver la imagen para desplegar el calendario, veas la palabra “calendario” en forma de enlace. Eso es señal de que no se ha cargado la imagen (estarias viendo el atributo atl de la misma), lo cual suele deberse a la ruta en la que se encuentre.
Un saludo y suerte. Si lo consigues, no dudes en decírmelo o incluso, si te animas, no dudes en enviar un enlace para que lo veamos todos.
he tratado de colocar este calendario pero no puedo como coño se hace, hice todo lo dice arriba y nada,,,,un manual por favor
Buenas, antetodo PEAZO DE SCRIPT, me ha sido de gran ayuda, lo uso en varios formularios pero ahora tengo un problema que no logro solucionar, me explico.
Tengo un formulario divido en varios form, cada uno independiente, con los form uso AJAX y dentro de ellos hay un campo de fecha, el problema lo tengo a la hora de “volver de AJAX”, ya que la primera vez si aparece la imagen del calendario, pero cuando vuelve no esta y no se donde colocar la funcion “cargaLinks()”, he intentado desde PHP poner echo ‘alert(”as”);cargaLinks();’; antes de volver a incluir la pagina (hago un include)
Gracias y saludos
La función “cargaLinks()” es la que tendrías que ejecutar tras la recarga de los controles de formulario, es decir, si dinámicamente, mediante AJAX, cargas parte del formulario y ahí van los campos para la fecha, una vez cargados haces la llamada a la función y se asociarán automáticamente los nuevos enlaces para abrir el calendario. Supongo que lo que deberías hacer es incluir la llamada a la función en la misma función que utilizas tras la obtención de los nuevos contenidos dinámicos.
Espero haberme explicado… ya me dirás.
Un saludo
hola estoy haciendo una pagina pero me gustaria agregar ese modelo de calendario k tienes, ya hise todo pora pasarlo a mi pagina pero no lo puedo, sera que me puedes explicar a detalles para utilizarlo? te agradecere mucho.
Hola Birza. He simplificado el conjunto de ejemplos que hay en el enlace para la descarga. Revisa el marcado que se emplea en ellos y trata de comprenderlo. Revisa también el artículo, y las respuestas que ha tenido, e intenta aplicar lo que en él se dice. Si aun así no consigues usarlo, lo mejor sería que indicases dónde te atascas o hasta dónde has llegado.
Un saludo y suerte
Gracias por la explicacion Rumoroso, pero sigo sin saber desde donde llamar a la funcion “cargaLinks()”. Te explico como lo tengo, haber si me puedes ayudar.
tengo un form con fecha1 y fecha2 que indican la fecha de apertura y cierre de una orden de trabajo, mas abajo tengo un apartado donde se pueden añadir los materiales usados con los albaranes y la fecha del albaran y un listado de los materiales usados. Aqui es donde esta el problema.
fecha1 y fecha2 van perfecto salvo cuando uso la funcion “cargaLinks()” que añade otro calendario.
el apartado de los materiales estan en un form distinto al de las fecha1 y fecha2, y como uso ajax para guardar los datos de los materiales tengo que usar la funcion “cargaLinks()”
la funcion “cargaLinks()” la llamo la cuando recarga desde AJAX llamandola desde una imagen con el metodo onLoad de esta.
Aqui te dejo un esquema a groso modo por si la explicacion no fue muy clara: (se que faltan los )
//solo cuando vuelve de AJAX
Gracias y saludos
el codigo es este:
body> form name=a> input type=text name=fecha1> input type=text name=fecha2> /form> form name=b> img onload=”javascript:cargaLinks()”> //solo cuando vuelve de AJAX input type=text name=fecha_materiales> /form> /body>
Gracias y saludos
Hola de nuevo “asdf”. He estado mirando lo que podría ocurrir y se me ocurrieron dos posibilidades:
Una de ellas se basaba en que la función “cargaLinks()” lo que hace es cargar los calendarios, pero presuponiendo que en el documento no había previamente ninguno. De ahí que si ya tenías alguno, al lanzarla de nuevo, se duplicaban. Lo que he hecho ha sido mejorar el script para que esto no ocurra y sólo ponga enlaces en aquellos que no los tienen previamente (incluí la comprobación de si el campo ya tiene asociado un calendario). Así ya no se duplica nunca.
La otra posibilidad es que el identificador del campo que estes cargando dinámicamente con AJAX esté repetido (por ejemplo, por estar presente ya previamente en el documento). Revisa y mira si te está ocurriendo.
Comprueba esto último y descargate de nuevo el script con la mejora. Además he puesto un ejemplo en http://niquelao.net/wp-content/uploads/2007/07/acc_calendar/jarl.html , en el que se carga un campo nuevo con AJAX (usé jQuery) y después, asociado al evento que se produce tras la carga, se lanza la función cargaLinks().
Espero que te sirva. Si aun así no te funciona, mándame el código al correo rumoroso@niquelao.net
Un saludo
Gracias Rumoroso, era la primera posibilidad, eres un fenomeno, ahora va perfecto con la nueva actualizacion.
Gracias Fenomeno.
Hola, felicidades por el script. Aunque aun no he conseguido que me funcione. Tengo una duda: ¿cómo funciona el archivo “days.php”? Es que yo no estoy usando php y no entiendo cómo va o si lo puedo adaptar (utilizo struts, java, jsp, javascript…). gracias de todas formas.
Hola muppet.
En realidad, el archivo “days.php” es un simple ejemplo de la forma en que se hace que se muestren únicamente los días disponibles de un determinado mes. Es decir, si por cualquier motivo necesitas que el calendario únicamente deje seleccionar los días disponibles, en el script tendrás una variable (al comienzo) que se llama “fichero_consulta” en la que tendrás que poner la URL que te devolverá los días que sean. A dicha URL se le envían mediante POST las variables “month” y “year”, y simplemente devolverá los números de los días disponibles separados por comas (en el caso del archivo days.php, devuelve cosas como “2,3,6,10,17,20″). El script que genera el calendario sólo generará enlaces para esos días. Mira en el propio artículo, en la actualización del 7 de julio del año pasado, y allí verás cómo va la cosa.
Lo dicho, no es necesario “days.php” si todos los días van a estar disponibles. En el caso contrario, puedes utilizar cualquier archivo o URL que te devuelva una secuencia de números separados por comas tras enviarle las variables que mencioné antes.
Espero haberme explicado. De no ser así, dímelo y trataré de ser más claro. Por cierto, dices que aun no has conseguido que funcione. Si tienes problemas, no dudes en decirlo.
Un saludo.
Hola! Muchas gracias por responder tan rápido! Vale, lo del “days.php” queda claro. Pero no entiendo cómo funciona a través del uso de las etiquetas y las clases, porque no sé donde están definidas… :$ Gracias de antemano…
La verdad es que yo lo que intento hacer es poder agregar, mediante un boton, un conjunto de campos cada vez, que se refieren a distintos familiares de un usuario. Uno de esos campos es la fecha de nacimiento, y con el calendario que usaba yo necesitaba tener un pequeño codigo entre etiquetas “script” justo despues del link del calendario y del input de la fecha para crear el calendario nuevo cada vez (con su nombre de variable diferente y correspondiente al nombre con el que se le llama en el input fecha). No se si me explico, asi:
Lo mas que he conseguido es que al agregar un nuevo familiar se cree el código y el script con un nombre de variable nuevo y como tiene que ser, PERO el codigo sale tal cual escrito como texto normal de la pagina en lugar de interpretarlo como codigo.
Resumiendo, me gustaria usar este calendario si puedo hacer esto que te digo (añadir tantos campos de fecha como quiera y que el calendario funcione con su input correspondiente), ya que parece que el script este no es necesario.
MUCHAS GRACIAS POR EL INTERÉS
Hola de nuevo muppet. Lo de las clases a utilizar, digamos que es una de las claves para simplificar su aplicación. Aplicando una clase concreta al control de formulario (clase que se define en el script mediante la variable “label_class” y que por defecto, cuando el idoma del documento es español es “fecha”) se creará de forma automática el enlace para mostrar el calendario. Luego, el resto de posibles clases a aplicar sobre el input son para aplicar condiciones (fecha anterior a hoy, fecha posterior, número de años, etc.) pero no son indispensables si no se necesitan.
Si mal no he entendido, lo que quieres hacer es que al pulsar ese botón, se creen dinámicamente nuevos controles de formulario. El script si te podría servir en ese caso. Dos cosas fundamentales habría que tener en cuenta: la primera, y de forma genérica, etiquetar correctamente todos los input, con identificadores (nunca repetidos) y con sus etiquetas label asociadas; la segunda, que tras crear los nuevos campos, se deberá ejecutar la función cargaLinks() para que estos tengan asociado su calendario. Tengo un ejemplo que, aunque puede que no sea exactamente lo que quieres (pues el nuevo campo se carga con AJAX en lugar de crearse con DOMscripting), pero te podría orientar respecto a lo que te estoy diciendo. Está en http://niquelao.net/wp-content/uploads/2007/07/acc_calendar/jarl.html y lo menciono y explico en una respuesta que puse el otro día (el 9 de julio) a una pregunta que me hicieron.
Espero haberte servido de ayuda…
Un saludo
pdta: si necesitas más ayuda, recuerda que si pones aquí algún fragmento de código, puede que no salga. En ese caso, en lugar de los signos de “menor que” y “mayor que”, utiliza corchetes o similar ([ y ])
ok! Sí, ya habia visto eso que me dices, pero muchas gracias. Sólo una cosita: segun parece solo puedo agregar un calendario cada vez q le doy a agregar. Le echaré un vistazo a ver si lo consigo.
GRACIAS OTRA VEZ!!
Hola de nuevo muppet. En el ejemplo sólo se añade uno, pero se podrían añadir tantos como se quieran. Tal vez lo modifique para que se puedan añadir más…
Un saludo
No me sale el link para el calendario. Solo funciona desde el archivo index.htm. Yo quiero que me funcione para un jsp. ¿Podría ser por eso?
Me extrañaría que fuese eso. Comprueba con alguna extensión para Firefox tipo Firebug para ver si lo que está ocurriendo es un error en la ejecución del script. Revisa cuando se ejecuta el script y demás… Aun así, para depurar y ver si está funcionando, prueba poniendo un simple enlace que ejecute la función cargaLinks(). Esto debería hacer que los enlaces se mostrasen donde deben. De no ser así, es posible que el problema esté en otro sitio. Aun así, si ves que no te va, pasame un enlace con un ejemplo de lo que te está pasando…
Un saludo y suerte.
Gracias por el apoyo… jeje. En fin. He escrito esto:
[p][label for=”fecha3″][input class=”fecha prev rang100″ type=”text” id=”fecha3″ name=”fecha3″ value=”" /][/label][/p]
[a href=”javascript:cargaLinks();”]Pinchar[/a]
(espero q haya salido el codigo pq he quitado los simbolos de mayor y menor)
Y, si lo escribo dentro del formulario (entre las etiquetas “form”) no me sale nada. Y al escribirlo fuera, me sale el campo de texto y el enlace, pero al pinchar no ocurre nada.
Cualquier ayuda es bienvenida.
¡y gracias!
Olvidemos lo de dentro y fuera del form. Sí que funciona dentro (no se actualizaría o algo asi). Pero al pinchar el enlace no ocurre nada…
hola otra vez… olvidar la entrada anterior… ya funciona… era un problema con las rutas al script en la cabecera…siento dar tanto la lata…
gracias otra vez Rumoroso
pd: no aseguro que no vuelva a molestar :$
Hola, no se que ocurre pero no llegan los mensajes que escribo… Habia dicho que ya me funciona lo de cargar el enlace a traves del link y que probablemente vuelva a dar la lata.
muchas gracias!!
Hola de nuevo muppet. No te preocupes, los mensajes no salían porque wordpress los puso en moderación.
Me alegro de que te funcione. Pregunta todo lo que quieras (que ya veré si respondo… jejeje… es broma). No te preocupes, cuando algo no funciona y se comparte el problema, además de poder llegar a una solución en conjunto, todos aprendemos algo (uffff… que pedante ha salido esto que acabo de decir
).
Un saludo
Bueno, pues vuelvo a la carga. Ahora lo que intento es lo de agregar varios calendarios. El “cargaLinks();” lo llamo desde la funcion javascript que tengo para crear los nuevos campos:
var label=document.createElement(’label’); var newInput7 = document.createElement(’input’);
newInput7.name = “famiFechaNac”+ind; newInput7.size = 10; newInput7.maxlength = 10; newInput7.id = “famiFechaNac”+ind; newInput7.className=”fecha prev rang100″;
label.setAttribute(’for’,'fecha’);
label.appendChild(newInput7); grp.appendChild(label); fieldset.appendChild(grp);
cargaLinks();
Esto es lo esencial. Claro que tengo todos los demas campos agregados en grp (que es un elemento span); y fieldset es el grupo de elementos que recojo de la pagina.
El caso es que no me sale el link.
un saludo!!
Pues hola de nuevo muppet. No lo he comprobado, pero si no me equivoco, el problema está en que estás asignando al atributo “for” del label el valor equivocado. Debería ser el valor del “id” del campo input. Debería ser algo así:
label.setAttribute(’for’,'famiFechaNac’+ind);
Además, IE no interpreta correctamente esta asignación del valor del atributo “for”. Él si traga la asignación mediante “label.htmlFor”.
Un saludo
No… ya lo habia probado antes y lo he vuelto a probar. Ademas ahora cuando le doy a un link que creo también cada vez con los demas campos para eliminar todos los campos, no hace nada…
A ver si a alguien se le ocurre por qué…
gracias
Hola otra vez… Es que no hay manera de que ejecute el cargaLinks()… Creo un link cada vez que agrego el grupo de campos para que al darle salga el otro link:
itemlink1.setAttribute(’href’, ‘javascript:cargaLinks();’);
y al ejecutarlo y pinchar en el link no hace nada (error en la pagina…).
Ahora he probado asi: itemlink1.setAttribute(’href’, ‘javascript:contenidonuevo(”jarl2″);’);
añadiendo la funcion que utilizas en tu ejemplo de carga dinámica, y tampoco funciona…
No se que puedo hacer, es como si no encontrase la funcion cargaLinks. Cualquier aportacion sera bien recibida
He probado el código que pusiste y me funciona (he añadido la parte necesaria para seleccionar el elemento “grp”, que en este caso es un párrafo, además de un texto dentro del label). Lo que no he usado es la penúltima línea, la del fieldset, pues me faltaba información para ello. No se qué decirte… si ves que no te va, pásame un ejemplo a mi correo rumoroso@niquelao.net de lo que pretendes hacer y trato de mirarlo.
El código que usé ha sido:
/—————–
[p id=”jarl”]
[label for=”fecha1″]
Una fecha cualquiera [input class=”fecha post todnact” type=”text” id=”fecha1″ name=”fecha1″ value=”" /]
[/label]
[/p]
var ind = 0;
var grp = document.getElementById(’jarl’)
var label=document.createElement(’label’);
label.appendChild(document.createTextNode(’otra fecha’))
var newInput7 = document.createElement(’input’);
newInput7.name = “famiFechaNac”+ind;
newInput7.size = 10;
newInput7.maxlength = 10;
newInput7.id = “famiFechaNac”+ind;
newInput7.className=”fecha prev rang100″;
label.htmlFor = “famiFechaNac”+ind;
label.appendChild(newInput7);
grp.appendChild(label);
fieldset.appendChild(grp);
cargaLinks();
/—————–
Suerte
Muchas gracias. Sí, el problema era que al crear el atributo “for” de “label” de esa manera (con setAttribute) IExplorer no lo reconoce, aunque Firefox sí. La solución, como me dijiste, es poner
label.htmlFor = ‘fecha’;
Bueno, como el mensaje no llegó completo reescribo. Decia que la solucion para que cargue bien todo en IExplorer como en Firefox es hacer label.htmlFor=’fecha’; en vez o ademas de label.setAttribute(’for’,'fecha’); Muchas Gracias por la colaboracion!!!
Hola Rumosoro!!
necesito tu ayuda con esto del calendario =( por mas que intento no puedo ver el calendario..=(
podrias decirme los pasos exactos?? principalmente como hacer la asociacion de los campos con los labels… los he seguido y no he logrado EXITO =(
Saludos!!
Hola de nuevo se me olvido comentar en el anterior post, que no puedo ver le boton y tampoco el llink a un lado del textbox =)
saludos!!
Primero que nada felicitaciones y muy agradecido por este calendario me has ahorrado dias de trabajo, por otro lado tuve porblemas al cargar la imagen del minicalendario al lado del campo de texto, a quien se le presente este caso puede solucionarlo de 2 maneras 1 editando el codigo de acc_calendar.js cambiando la ruta en la variable dir_imagenes y si les da terror hacer eso entonces creen una carpeta llamada images y dentro copian la imagenes de acc_calendar y listo
Señores, llevo trabajando en la inclusion de este calendario varios dias y no he sido capas de resolver el problema de mostrarlo, si alguno de ustedes, tiene la paciencia y el tiempo como para ayudarme con este pequeño problema les agradeceria en el alma; otro gran problema es que para ayer es tarde, les envio el respectivo codigo y si es posible me responden hoy
Explicacion: es un formulario sencillo, y solo necesito que el calendario me aparesca al lado del campo Fecha Inicio,
Fecha Inicio
Descripción
Archivo
responder a:
sebasca5@yahoo.com
hola! estoy utilizando el calendario en un sitio que estoy haciendo pero tengo un problema, que cuando bajo la barra de desplazamiento tambien se baja mi caja de texto junto con mi calendario pasando por encima de mis otros elementos creados, me pueden ayudar por fa… no se por que pasa esto
Hola a todos de nuevo.
He preparado otro ejemplo con un par de imágenes para explicar la forma en que se consigue asociar y mostrar el calendario. Espero que os sirva. Podéis acceder a él en http://niquelao.net/wp-content/uploads/2007