Calendario en Javascript

Crear un calendario en javascript es muy útil, por su aspecto vistoso. La forma para mostrarlo va a ser utilizando un botón y un textbox; es decir al dar clic en el botón se va a mostrar el calendario y después de elegir una fecha, ésta se mostrará en el textbox.

El procedimiento para realizarlo es el siguiente:

1. Se agrega en la carpeta del proyecto los scripts (estilos).

2. Después dentro de Head en el código HTML, se escribe el siguiente código:

Es importante mencionar que el calendario que se va a mostrar, va a ser dependiendo de los scripts que nosotros elijamos, ya que existen distintos estilos para mostrar, además de otros idiomas.

3. Por ultimo, dentro de body en el codigo HTML, se escribe el siguiente código:

Donde en inputField va a ir el nombre del textbox, en ifFormat el formato de la fecha que se va a mostrar en el textbox y button el nombre del botón.

Si se desea presentar el calendario con solo pulsar un textbox, el código es el siguiente:

Este código es similar al del paso 3, solo que en este caso en button se va a escribir el nombre del textbox, para que cuando pulsemos sobre el textbox se muestre el calendario sin la necesidad de pulsar un botón.

Espero les sea de gran ayuda este código para crear un calendario.

Abrir un popup (ventana emergente) y actualizar la ventana padre

La idea principal es abrir un popup (ventana emergente) y producir algún cambio en las variables o base de datos, al mismo tiempo que se presiona un botón y se ven los cambios en la página padre que abrió la ventana emergente.

Es muy fácil realizar la actualización, para ello es necesario copiar el siguiente código en las dos ventanas (padre e hijo) como se explica a continuación:

Ventana Padre

En el load se escribe el siguiente código:

NOTA: La línea que va antes de eventtarget son dos guión bajo seguidos.

En el botón Abrir se escribe el siguiente código para mostrar la ventana emergente o ventana hijo:

Ventana Hijo

En el botón Guardar se escribe el siguiente código para mostrar un mensaje y actualizar:

NOTA: La línea que va antes de doPostBack son dos guión bajo seguidos.

Como ven, es muy sencillo actualizar los datos.

Espero que les sea de mucha utilidad.