DotNetcr.com
Si deseas hacer un intercambio de links con DotNetcr, escríbenos aquí
Recibe las actualizaciones vía RSS
Te invitamos a unirte en nuestras redes
   http://www.facebook.com/DotNetcr
   http://www.twitter.com/dotnetcr

Calendario en ventana emergente con ASP .NET 2005

Por h@nz | 12/3/2006 | Visitas 57,214 | Voto 4.00
Este es un ejemplo de como utilizar una página web que muestre un popup con un calendario y que podamos retornar un valor a la página que llamó a nuestro PopUp. Código en VB y C#.
Categorías : VB.NET, C#, ASP.NET
El código que aquí describo esta en C#, pero en el archivo adjunto se encuentran dos proyectos, uno en C# y el otro en VB.

Descargar ejemplo Calendario_PopUp.zip

En un pequeño trabajo hace un tiempo quise utilizar un control de Fechas, la idea era simple, escribir una fecha "válida" en una caja de Texto... pero despues de un rato me puse a pensar... los usuarios (benditos sean los ignorantes dijo alguien) suelen ingresan datos equivocados, así que habría que validar las cajas de textos... y recordé al Control DTPicker de nuestro querido amigo Visual Basic 6, pero no encontré algo parecido en los controles de .NET (al menos no para aplicaciones web, si alguien lo encuentra por favor saqueme de esta ignorancia). El punto es que hice un calendario que queda mas o menos como en esta figura:



Empezamos agregando una clase (dentro de la carpeta App_Code obviamente) con el nombre MiCalendario (bien original no?) y escribimos el siguiente código:

public abstract class MiCalendario
{
private static string inicio = "<script language='JavaScript'>document.getElementById('";
private static string nombre = "').value = showModalDialog('Calendario.aspx'";
private static string atributos = "'dialogTop=100px; dialogLeft=250px; dialogWidth=206px; " +
"dialogHeight=205px; center=yes; help=no; status=no; menubar=no; resizable=no; border=thin')";

public static void verCalendario(System.Web.UI.Page pagina, string control)
{
string wFecha = inicio + control + nombre + ",'', " + atributos + "</script>";
pagina.ClientScript.RegisterStartupScript(pagina.GetType(), "ventana", wFecha);
}

public static void verCalendario(System.Web.UI.Page pagina, string control, string _default)
{
string wFecha = inicio + control + nombre + ", '" + _default + "', " + atributos + "</script>";
pagina.ClientScript.RegisterStartupScript(pagina.GetType(), "ventana", wFecha);
}
}


Se trata de una Clase Abstracta, con métodos estáticos, pues la idea es escribir la menor cantidad posible de código cada vez que se llame al calendario. Ahora, aclaremos algunos puntos de este código.

Tenemos dos métodos que tienen el mismo nombre, pero los diferencian sus parámetros (eso se llama sobrecarga según entiendo), en el primer caso, si al cargar el calendario, se cierra la ventana sin haber seleccionado alguna fecha, la ventana devolverá una cadena vacía. En el segundo caso, si el usuario cierra el calendario sin haber seleccionado alguna fecha, se devolverá la fecha que le hayamos indicado por defecto.

Ahora, estoy utilizando secuencias de comando de JavaScript para abrir la ventana emergente; para poder ejecutar alguna instrucción de JavaScript dentro de alguna clase de .NET debemos hacerlo por medio de ClientScript.RegisterStartupScript, esta instrucción requiere tres parámetros: el tipo de secuencia de comandos a utilizar, una clave que identifique a la secuencia y el texto de la secuencia que se registrará; anteponemos pagina para indicarle que se hace referencia a la página que invocó al calendario.

Además de esto, uso la intrucción ShowModalDialog de JavaScript, la cual me permite abrir una ventana modal (osea que no deja trabajar con la página que la invocó hasta que se cierre la ventana modal) y recuperar un valor de la página.

El primer parámetro hace referencia a la página que invocará a nuestro calendario, el segundo parámetro hará referencia al nombre de la Caja de Texto que deberá recibir el valor seleccionado en el Calendario y el tercero el valor por defecto que tendrá el calendario.

Una vez hecho esto crearemos la página web que contendrá el calendario... llamémosle Calendario.aspx, en dicha página dibujaremos un Control Calendario llamado cal, y una caja de texto llamada txtFecha.

Ahora en el código de la página web (NO en el codebehind, sino en el código HTML de la página) escribiremos lo siguiente, exactamente despues de la etiqueta <TITLE>, es decir dentro del <HEAD>:

<script type="text/javascript" language="javascript">
function retornaValor(){
if(document.getElementById('txtFecha').value == "")
{
if(dialogArguments == "")
returnValue = "";
else
returnValue = dialogArguments;
}
}
</script>
<base target="_self" />


Este JavaScript es para devolver el valor de la fecha seleccionada a la página que invocó la ventana emergente. Ahora modifiquemos la etiqueta body para que se vea de la siguiente manera: <body onunload="retornaValor();"> y luego modifiquemos la etiqueta div para que se vea como sigue: <div style="position:absolute; top:0; left:0;">.

Ahora debemos escribir el siguiente código en el CodeBehind de nuestra página Calendario, osea en Calendario.aspx.cs, y debe quedar como se muestra a continuación:

using System;
using System.Web.UI.WebControls;

public partial class Calendario : System.Web.UI.Page
{
protected void cal_SelectionChanged(object sender, EventArgs e)
{
txtFecha.Text = cal.SelectedDate.ToShortDateString();

string devuelveFecha = "<script language='JavaScript'>" +
"returnValue = document.getElementById('txtFecha').value;" +
"close();</script>";

ClientScript.RegisterStartupScript(this.GetType(), "Devolver", devuelveFecha);
}
}


A buen entendedor, pocas palabras, pero por siacaso, al seleccionar una fecha en el control calendario escribimos la fecha en la caja de texto de la página Calendario, luego, como va a ocurrir un PostBack, la página se tendrá que descargar (evento onload del modelo de objetos del navegador), en ese momento le indicamos a la página que retorne el valor de la caja de texto y finalmente le decimos que se cierre la página del calendario.

Ahora ya esta todo listo... solo nos queda invocar el calendario y probar si funciona, de repente les estoy mintiendo y Uds. ni cuenta se dan... para probar la aplicación solo hace falta agregar un control TextBox y dos Controles Button, al TextBox le pondremos el nombre txtFecha. Ahora escribiremos en el primer botón el siguiente código


MiCalendario.verCalendario(this, "txtFecha");


y en el segundo botón lo siguiente:

MiCalendario.verCalendario(this, "txtFecha", txtFecha.Text);


en este segundo caso, si hay una fecha escrita en la caja de texto y no se selecciona una fecha en el calendario entonces se devolverá la fecha que tenía el cuadro de texto.

Uds. pueden utilizar el método que deseen, no es obligatorio que usen ambos, y lo bueno de esto es que apenas deben escribir una línea de código. Probablemente el código aquí mostrado funcione mejor si usamos AJAX (ya que esta de moda) pero por lo pronto no lo he podido probar... pero creo que Uds. lo pueden hacer por mi y me avisan.

Espero que lo revisen y les sea de utilidad... nos vemos.

Descargar ejemplo Calendario_PopUp.zip
Area de Comentarios
Por h@nz - Fecha: 2006/12/04 10:06 AM
Solo algo que aclarar, al ocurrir un PostBack (ida y vuelta del cliente al Servidor), toda página web (independiente de si es o no .NET) pasa por los eventos onUnload(descarga) y onLoad(carga) del modelo de objetos del navegador. Al parecer puse "descargar (evento onload" y esto no es correcto.

Saludos
Por Anónimo - Fecha: 2007/01/09 11:02 AM
Buenas Tardes, me podrian decir donde esta el projecto en VB porque solo sale en C, Gracias!
Por h@nz - Fecha: 2007/01/10 01:21 PM
Hola amigo, en el archivo que descargas vienen dos carpetas, una contiene el proyecto en C# y la otra en Visual Basic.

Revisalo bien, lo acabo de descargar y funciona correctamente.

Saludos.
Por Anónimo - Fecha: 2007/01/22 12:20 PM
Me parece interesante el tema, estoy trabajando actualmente en desarrollar una agenda parecida a la que brinda como servicio extra Yahoo en su pajina de correo y además debe ser registrada por sesiones de usuario y recordar sus eventos (implica una base de datos), si alguien con experiencia en el tema puediera aclararme la forma de hacerlo seria magnifico, gracias
Por h@nz - Fecha: 2007/01/31 10:13 AM
Bueno amigo, provecho con el desarrollo, empieza por tu análisis, ni modo.. En realida, haciendo un análisis a vista de ojo de pájaro (osea rapidito), no parece tan complicado, pero como siempre los detalles saltan cuando lo revisas con calma.

Seguro aprenderás mucho con eso y de paso a ver si te animas también a publicar tus experiencias.

Saludos.
Por danielrinf - Fecha: 2007/02/01 09:11 AM
Saludos desde Venezuela.
Tengo un problema con este ejemplo: Ya he seleccionado una fecha y ésta aparece en mi textbox, pero al hacer un PostBack, el textbox pierde el valor de la fecha. ¿A que se debe esto? ¿Cómo puedo solucionarlo?
Gracias
Por h@nz - Fecha: 2007/02/05 10:49 AM
Hola amigo Venezolano, saludos desde Perú...

Te comento, lo más probable es que estes usando el cuadro de texto con la propiedad ReadOnly en true o la propiedad Enabled en false para evitar que un usuario cambie el valor de tu TextBox. Un problema que tienen las páginas ASP .NET es que cuando estos valores se activan se pierde el valor de las cajas de texto.

Como solucionarlo: Deja la propiedad ReadOnly en false y la propiedad Enabled en true y para evitar que un usuario cambie el valor del TextBox escribe en el código HTML del Textbox el atributo OnKeyDown="return false;". Recuerda que esto se escribe en la declaración de la caja de texto en el código de la página aspx, no en el codeBehind.

Esa es la forma que yo utilizo cuando trabajo con este tip. Espero te sirva.

Saludos.
Por Anónimo - Fecha: 2007/02/15 12:09 PM
buenas tardes, soy novato en asp.net, y estoy trabajando con master page y content page. este articulo funciona lo mismo para una pagina detalle? si es asi como deberia ser el codigo de la pagina calendario? muchas gracias y perdon por la pregunta un poco tonta
Por h@nz - Fecha: 2007/02/16 08:45 AM
Hola usuario anónimo, no te preocupes por la pregunta, las preguntas tontas son aquellas que no se hacen, aquí todos aprendemos cosas nuevas cada día.

Te respondo: los controles de servidor asp .net cambian su nombre cuando son compilados para mostrarse en el usuario, normalmente se le antepone un prefijo ctl00 dependiendo del contenedor en el que esté, en el caso de un ContentPage, si no le haz cambiado de nombre, probablemente tenga el siguiente prefijo: ctl00$ContentPlaceHolder1$ y seguido del nombre que le diste a tu control, por ejemplo: ctl00$ContentPlaceHolder1$txtFecha. Te sugiero que al ejecutar tu página leas el código HTML generado (menú Ver opción código fuente, del navegador) una vez que sepas cual es el nombre que le coloca a tu cuadro de texto, tomas el prefijo y lo agregues a los métodos VerCalendario. Ejemplo: inicio + "ctl00$ContentPlaceHolder1$" + control

Espero que esto te ayude, y no dejes de preguntar y si puedes, comparte también lo que vayas aprendiendo.

Saludos.
Por Anónimo - Fecha: 2007/02/28 11:10 PM
Hola, una consulta. Soy nuevo en asp.net. Quiero hacer una aplicacion WEB, tipo la del Banco de Cretio. Que me permite ocultar la barra de direcciones, barra de herramientas y Menu de las paginas web. Me puede ayudar con esto. Gracias.
SHARK
Por Anónimo - Fecha: 2007/03/07 09:14 AM
Hola que tal soy el usuario que pregunto si el ejemplo funcionaba con master page y content page. Probe lo que me decias, ctl00$cuerpo$txtFecha" type="text" id="ctl00_cuerpo_txtFecha es el codigo html, probe con los dos casos ctl00$cuerpo$txtFecha y ctl00_cuerpo_txtFecha , pero no funciona, el error que me da es document.getElementById es nulo o no es un objeto, la pagina desde donde llamo al calendario es una pagina detalle. Nuevamente disculpe la molestia
Por Anónimo - Fecha: 2007/03/15 11:39 AM
Bueno, estoy aprendiendo Asp.Net. baje el ejemplo Calendario_PopUp.Zip y opte por el de VB por que es el lenguaje que mas recuerdo :), bueno el problema no es ese. sino que algunas cosas como q no funcionaban correctamente despues de varios dias he logado modificar el codigo basandome en ejemplos de otros tutoriales.
uno de los problemas que tuve y no he logrado solucionar es de la ventana modal. pues en ambos casos(en que muestra el ejemplo y en el q uso yo) dejan trabajar en Default.aspx y en el ejemplo decia q no hiba a dejar hacer nada hasta que cierre la ventana Calendario.aspx nose si se puede hacer eso o no o solo era una grata ilucion :(
bueno muchas gracias.
Por Anónimo - Fecha: 2007/04/10 11:12 AM
Perfecto H@nz... estube buscando algun codigo util, sencillo y no encontraba... el codigo que tienes me parece perfecto...
Muchas gracias por compartirlo..

Un saludo desde mexico!!...
Por Anónimo - Fecha: 2007/04/10 11:52 AM
Por cierto.. si funciona con master page, solo necesitas darle el nombre que del lado del cliente va a recibir javascript.. por ej. el code behind para mi control de texto puse lo sig:
MiCalendario.verCalendario(Me, TxtFechaI.ClientID)

Y jalo perfectamente..

Saludos
J@vi.Mtz
Por Anónimo - Fecha: 2007/05/02 11:00 AM
no puedo ve el obeto calendario, ya que el navegador tiene bloqueada la ventana, como desactivo bloquear ventanas emergentes
Por Anónimo - Fecha: 2007/05/30 04:48 PM
Muchas gracias por compartir pero tengo un problema no se ejecuta con Mozilla Firefox 2.0 no se si es algun problema si podrias ayudarme gracias.


Saludos desde Lima Peru
Por Anónimo - Fecha: 2007/06/14 11:37 AM
Muchas Gracias por tu aporte, me ha ayudado mucho
Por julianpur - Fecha: 2007/06/25 02:14 PM
hola h@nz, porfa ayudame, mira que hago un proyecto similar al tuyo pero solo con el ejemplo y me funciona perfecto pero cuando agrego esto a un proyecto grande no me funciona y me aparece el error document.getElementById es nulo o no es un objeto, la pagina desde donde llamo al calendario es una pagina detalle.

gracias ayudame
Por Anónimo - Fecha: 2007/06/28 06:14 AM
Me ha resulta muy útil
Por Anónimo - Fecha: 2007/07/02 06:42 PM
Saludos a todos,
genial h@nz! gracias por compartirlo, pero me ocurre igual que a julianpur.
Todavia no he conseguido averiguar q ocurre, si podeis echarnos una mano os lo agradeceriamos.

un saludo.
Por Anónimo - Fecha: 2007/07/12 09:11 PM
h@nz sos un fenomeno!!! gracias por tu ayuda... saludos desde argentina!!!
Por Anónimo - Fecha: 2007/07/20 09:47 AM
Primero que nada darte las gracias porque me ha salvado de un buen aprieto, lo que no consigo es usarlo en un control ascx. ¿Se puede usar en el control?. Gracias
Por Anónimo - Fecha: 2007/08/14 05:46 PM
Una consulta, quiero abrir una ventana modal para confirmar los cambios de un mantenedor, pero al cerrar la ventana , no me gatilla ningun evento como para poder realizar la actualización en la base de datos. ¿como se puede gatillar un evento del codebehind de la pagina "padre" luego de confirmar o cancelar?
Por Anónimo - Fecha: 2007/09/05 02:32 PM
Hola, ya tengo tu aplicativo y esta muy bueno, pero lo que pasa es que deseo saber como hago para que el evento load vuelva a cargar la pagina padre, por que una vez que se cierra el popup(calendario) no se dispara el evento, y necesito por que deseo saber por medio de dicho evento que valor me trajo.
Por Anónimo - Fecha: 2007/09/05 02:32 PM
Hola, ya tengo tu aplicativo y esta muy bueno, pero lo que pasa es que deseo saber como hago para que el evento load vuelva a cargar la pagina padre, por que una vez que se cierra el popup(calendario) no se dispara el evento, y necesito por que deseo saber por medio de dicho evento que valor me trajo.
Por Anónimo - Fecha: 2007/10/08 10:54 PM
Amigos... alguine me puede indicar como hacer que se levante el POPUP desde un CONTAINER (master page)... Gracias
Por Anónimo - Fecha: 2007/10/23 02:43 PM
hola amigos gracias x sus comentarios
Por Anónimo - Fecha: 2007/10/24 10:31 AM
Hola fantastico, pero como hago correr esto utilizabdo MasterPage, saben probe pero no funciona con Master Page, seria super me puedan ayudar, gracias.

Saludos Jhovany
Por Anónimo - Fecha: 2007/10/30 09:51 AM
Todo esta bien, yo tengo q hacer dos calendarios porq necesito una fecha desde y otra hasta pero al momento de seleccionar la fecha hasta se borra la fecha desde quisiera q permanezca ahi como puedo hacer para solucionar esto
Por Anónimo - Fecha: 2007/11/08 07:52 AM
hng
Por Anónimo - Fecha: 2007/11/20 10:35 AM
Saludos desde Bolivia
Para Master page MiCalendario.verCalendario(Me, TxtFechaI.ClientID)
Por Anónimo - Fecha: 2007/12/19 01:55 PM
Muchas gracias amigo Boliviano... por fin pude!!... yo también tenía el error de getElementbyId(...) es nulo... gracias por el dato.

Saludos desde México y gracias a h@nz por el programa... MUY ÚTIL

Max Hurtado
Por Anónimo - Fecha: 2008/01/23 05:18 PM
Excelen ejemplo, felicitar al creador, eres todo un chicho.

Salu2.

HAWK
Por Anónimo - Fecha: 2008/06/13 12:46 PM
hola soy nuevo en esto me envia este mensaje Content controls have to be top-level controls in a content page or a nested master page that references a master page.

Alguien me pude ayudar?
Por Anónimo - Fecha: 2008/06/26 08:16 AM
Este Calendario funciona de mil maravillas en los proyectos que he trabajado, solo me he topado con un problema, no me corre en Firefox no en Safari, solo funciona en Internet Explorer. Mi problema se genera por que en la empresa donde trabajo hay PC pero tambien hay Mac, y la aplicacion web la corren desde las dos plataformas. Alguien sabe como hacerlo funcionar en otro navegador que no sea Mozila, Mi Correo es davidalvarez_01@yahoo.com por si tiene la solucion.

Gracias
Por Anónimo - Fecha: 2008/09/30 10:27 AM
Genial h@nz! gracias por compartirlo, Excelente! diria yo.

Saludos desde México
Por Anónimo - Fecha: 2008/10/10 03:20 PM
hola H@nz,

bueno estoy utilizando el ejemplo que tienes, me ejecuta de maravilla pero mi problema es que cuando le doy en algun boton me aparece automaticamente "undefined" para que me muestre el calendario tengo que dar actualizar paguina y automaticamente me aparece el calendario, podrias decirme como le ago para que aparesca sin que este actualizando a cada rato.

Saludos desde México
Por Anónimo - Fecha: 2008/10/10 03:26 PM
hola
Por Anónimo - Fecha: 2008/10/23 05:05 PM
Excelente trabajo!... Gracias por compartirlo. Aldo Guillén, México.
Por Anónimo - Fecha: 2010/01/28 09:51 PM
interesante, esta sencillo aunque ahora los controles de ajax que vienen con .net tienen este control
Por Anónimo - Fecha: 2011/01/27 11:03 PM
Gracias, fue de mucha utilidad y muy sencillo de aplicar
Por Anónimo - Fecha: 2011/03/24 02:13 PM
Buenas utilice el ejemplo y me funciono de maravilla pero ahora tengo un pequeño problema.(Uso master Page) Abro el popup perfectamente con verRepresentantes(Me, txtRepresentante.ClientID, txtRepresentante.Text) y tengo el el popup un gridview que tiene un boton de seleccionar, pero cuando le doy click me abre otra paguina y en la direccion sale javascript:__doPostBack('dgwRepresentantes','BuscarDato$0') Hice lo mismo en otro proyecto pero sin master page y me funciona de maravilla. Ayuda plis
Por Anónimo - Fecha: 2011/11/24 09:03 AM
no me funciona con el google chrome ayuda por favor en firefox me sale perfecto y con master page normal pero en chrome nada
Por Anónimo - Fecha: 2012/04/26 10:32 AM
Como a unos cuantos nos gusatreda que la defensa se hiciese de los TRES sectores me1s atacados por los recortes Canal, Sanidad, y Educacif3n entre otros que como sabemos que estan minanado todos los campos SOCIALES y no es JUSTO:Recibir un saludo.A favor o en Contra: 0 0
Por Anónimo - Fecha: 2012/04/27 07:10 AM
wvU7kh , [url=http://ogkrtyxtaaea.com/]ogkrtyxtaaea[/url], [link=http://hsuunyxycdtw.com/]hsuunyxycdtw[/link], http://rkkqhgfpfqgs.com/
Por Anónimo - Fecha: 2012/04/29 01:06 AM
o6x3yc , [url=http://nsdtlvjxkitl.com/]nsdtlvjxkitl[/url], [link=http://swnmrysezrgm.com/]swnmrysezrgm[/link], http://mftjguqhnvgv.com/
Por Anónimo - Fecha: 2015/07/18 01:39 PM
Hola Armando, el nombre de bntixponcaieo salif3 xque ased es el paseo sin ruta preestablecida en este paseo van de todo tipo de cliclistas, proncipalmente de nivel medio. saludos.
Por Anónimo - Fecha: 2015/07/21 01:35 PM
Hermoso! Muchas Gracias....Ya lo baje9 y queda be1rbaro en todos lados porque este1 geainl! Todos los meses me gustan por sus coloridos y simpateda.Soy alumna de Sotano Blanco y siempre admire9 tus trabajos!!!Gracias por compartir tu talento y Felicidades! http://frjbnlbhl.com [url=http://ilwqjhnfy.com]ilwqjhnfy[/url] [link=http://bfcajwdg.com]bfcajwdg[/link]
Por Anónimo - Fecha: 2015/12/17 03:54 PM
hola, tengo unas dudas sobre el paseo:1.tengo que tener un nivel alto como ciclista?2.como cunotas kilf3metros sere1n aproximadamente?3.como cual seria la velocidad promedio?saludos
Por Anónimo - Fecha: 2015/12/19 02:49 AM
Hola Armando, el nombre de bixnepoitanco salif3 xque ased es el paseo sin ruta preestablecida en este paseo van de todo tipo de cliclistas, proncipalmente de nivel medio. saludos. http://tkgktx.com [url=http://frwywtftry.com]frwywtftry[/url] [link=http://zkojic.com]zkojic[/link]
Por Anónimo - Fecha: 2015/12/20 02:22 PM
Hola,la hora de salida ofaciil es a las 8 desde ley independecia, pero a veces se da una tolerancia de 10 a 15 minutos.. las rutas se publican el mismo deda del evento en facebook. http://jztppkkq.com [url=http://yyilksvoub.com]yyilksvoub[/url] [link=http://yfkclh.com]yfkclh[/link]
Ingrese su Comentario
Comentario
Para poder votar debe estar registrado en DotNetcr.com
Solo queda registrado el primer voto enviado
Voto


Últimos Recursos
pedrojavier
CALIN
willipinru
richard
ragomez
shizumiru
PER 238
MEX 236
CRI 188
COL 118
ESP 105
ARG 88