Modificaciones en el calendario II

  • Por
Continuamos modificando la librería del calendario. Esta vez para crear una función Javascript encargada de copiar la fecha en el formulario.
2) Función Javascript para copiar la fecha

Esta función debe colocar en el formulario de origen, concretamente en el campo asociado al botón pulsado, la fecha que se ha pulsado entre los días del calendario. Una vez seleccionada la fecha, además de copiarla, debe cerrar la ventana del calendario puesto que ya se utilizó para lo que se quería y ya no es necesaria hasta que se vuelva a pulsar el botón asociado a un campo fecha.

Vemos el código y a continuación ofreceremos algunas explicaciones.

<script>
function devuelveFecha(dia,mes,ano){
    //Se encarga de escribir en el formulario adecuado los valores seleccionados
    //también debe cerrar la ventana del calendario
    var formulario_destino = '<?echo $_GET["formulario"]?>'
    var campo_destino = '<?echo $_GET["nomcampo"]?>'

    //meto el dia
    eval ("opener.document." + formulario_destino + "." + campo_destino + ".value='" + dia + "/" + mes + "/" + ano + "'")
    window.close()
}
</script>


Esta función tiene tres complicaciones fundamentales. La primera se trata de el campo donde copiar la información se encuentra en otra página web que está en otra ventana de navegador. Esto no es problema, porque sabemos acceder desde una ventana secundaria (el calendario) a la ventana que la abrió (la que contiene el formulario), a través de la variable opener, que contiene una referencia, como decíamos, a la ventana origen. Opener es como el objeto window de la ventana que abrió el popup y a raiz de dicha variable cuelga toda la jerarquía de objetos de la ventana del formulario.

Referencia: Para dominar estos conceptos de trabajo con ventanas secundarias es interesante leer el manual Control de ventanas secundarias con Javascript.

La segunda complicación consiste en que la función debe conocer el nombre del formulario y del campo de texto donde copiar el valor de la fecha seleccionada. Dichos nombres fueron pasados al abrir la ventana del calendario y estaban en variables PHP. Sin embargo, necesitamos utilizar las variables en Javascript y donde están declaradas es en el ámbito de PHP. Para pasar las variables desde el ámbito de PHP al de Javascript se utilizan las líneas de código:

var formulario_destino = '<?echo $_GET["formulario"]?>'
var campo_destino = '<?echo $_GET["nomcampo"]?>'


Referencia: El tema de pasar variables de un lenguaje a otro lo habíamos tratado en la FAQ Pasar variables de ASP o PHP hacia Javascript o viceversa.

La tercera y última complicación que queríamos destacar consiste en la razón de la utilización de la función eval. Es tal vez la complejidad más complicada de explicar, y de comprender por las personas poco acostumbradas a Javascript. La función eval() sirve para evaluar, o lo que es lo mismo: ejecutar, una sentencia Javascript. Lo que hay entre los paréntesis de eval() es la composición de la sentencia que se debe ejecutar para colocar la fecha en el campo de formulario. Y en su caso, eval(), después de componerse la sentencia, la ejecuta, dando como resultado el efecto buscado.

Nota: La razón de utilizar eval() está bien clara. Nosotros podemos concatenar todos los elementos necesarios para crear una sentencia Javascript, pero lo único que podríamos obtener como resultado es una variable que contuviese un código Javascript. Si queremos ejecutarlo necesitamos forzosamente de la ayuda de la función eval(). Es difícil encontrar ejemplos tan interesantes donde la utilización de eval() es crucial para resolver un problema. De todos modos, si no llegamos a entender puede ser interesante acceder al manual de Javascript II, donde hablamos de la librería de funciones Javascript y de ejemplos de las mismas, donde encontraremos otro ejemplo de uso de eval().

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

hbc1976

14/5/2010
Onject expected
Estoy probando en IE7 vuestro calendario y me da el siguiente error:

Linea: 1
Caracter: 1
Error: Object expected
Codigo: 0
Direccion url :http://127.0.0.1/calendario-seleccion-fecha/calendario/index.php?formulario=fcalen&nomcampo=fecha2

¿Me podeis indicar por que puede pasar ?
¿No he modificado nada y online si funciona?

Espero vuestra respuesta gracias y un saludo.