Accueil > > > CALENDRIER POPUP ET MULTICONTROLES
CALENDRIER POPUP ET MULTICONTROLES
Information sur la source
Description
Dans la conception de mon site pour Intranet de mon entreprise, j'ai eu besoin de créer un calendrier unique en popup et qui puisse servir pour PLUSIEURS controles (textbox) appartenant à la même page. Le code de base est celui ecrit par "jesusonline" (je rend à jesus ce qui est a jesus), la modif principale se situe dans le code Javascript d'appel et de renvoi (merci à nhervagault). J'ai cependant ré-écrit le code complet pour que celui puisse être utilisé tel quel. ** calendrier Jesusonline: http://www.aspfr.com/codes/RECUPERER-DATE-CALENDAR -OUVERT-DANS-POPUP-DEBUTANT_29396.aspx ** Ce code permet donc d'identifier le controle 'textbox' dans lequel la date sélectionnée doit être renvoyée. Vous pouvez ainsi créer une seule page qui contient le calendrier et qui pourra être utilisé par les pages qui contiennent plusieurs controles à remplir (4 dans mon code). Le code mélange à la fois du javascript et de l'ASP, entre autres via un GET dans l'appel du popup.
Source
- 'ChoixDate.aspx (le nom n'a pas d'importance)
- NB: dans cet exemple, j'utilise un epage maitre ("dvpmt.master)..adpatez votre header de page en consequence (reference a la MaterPageFile)...les contentplace holder sont egalement a modifier, ainsi que les déclarations de paramètres (cf code dans la page)
-
- <%@ Page Language="VB" MasterPageFile="~/dvpmt.master" Title="Page sans titre" %>
-
- <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
-
- <script language="javascript" type="text/javascript">
-
- function ShowCalendarPopup(idel)
- {
- var url = "Calendar.aspx?id=" + idel //idel est l'ID de l'élément à remplir (déclaration dans l'appel...cf plus bas)
- // on utilise cette déclaration d'URL (avec ?id=") afin de passer l'ID dans l'adresse de la page (méthode GET) pour récupérer cette ID dans le Popup
- window.open(url,"Calendrier","width=238, height=218, resizable=no, toolbar=false, scrollbars=false, status=yes");
- }
- </script>
-
- </asp:Content>
-
- <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
-
- <form>
- <div>Date Visite</div><asp:TextBox ID="visit" Class="tbg1" runat="server"></asp:TextBox>
-
- <!-- ici j'utilise une image pour cliquer et ouvrir le popup, sinon vous pouvez utilisez un lien -->
- <asp:ImageButton ID="bvisite" runat="server" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
- PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$visit')" />
- <!--avec un quote simple, déclaration de l'ID comme paramètre (idel)
- si vous n'utilisez pas de page maitre, "ctl00$ContentPlaceHolder1$" doit être omis, souvenez vous, l'ID du textbox est "visit"
- pour info, lors de la compilation avec une page maitre, "ctl00$ContentPlaceHolder1$" est ajouté à l'ID (pour vérifier ce qui est ajouté: menu affichage puis Source' -->
-
- <!-- exemple pour utiliser un lien-->
- <a href="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$visit')">Ouvrir le Calendrier</a>
-
-
- <!-- répétition du code avec a chaque fois la déclaration de l'ID du controle attenant à limage/lien-->
-
- <div>Date Demande</div><asp:TextBox ID="demand" Class="tb1" runat="server"></asp:TextBox>
- <asp:ImageButton ID="bdemand" runat="server" class="pic2" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
- PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$demand')" /><br />
- <div>Date Remise Prix</div><asp:TextBox ID="rprix" Class="tbg1" runat="server"></asp:TextBox>
- <asp:ImageButton ID="brprix" runat="server" class="pic1" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
- PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$rprix')" />
- <div>Date Retour BE</div><asp:TextBox ID="retourbe" Class="tb1" runat="server"></asp:TextBox>
- <asp:ImageButton ID="brbe" runat="server" class="pic2" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
- PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$retourbe')" /><br />
- </form>
-
- </asp:Content>
-
- ----------------------------------------------------------------------------------------------------------------------------
- ----------------------------------------------------------------------------------------------------------------------------
-
- Calendar.aspx (le nom est important, car l'autre page l'appelle via la popup)
-
- <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Calendar.aspx.vb" Inherits="Calendar" %>
- <!-- ici pas de page maitre, bah oui...sinon ca fait plus un popup ;) -->
-
- <script language="vb" runat="server">
- Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
- Dim idelement As String : idelement = Request("id") 'c'est ici que l'on récupère l'ID du controle à remplir dans l'adresse
- 'idelement est la variable déclarée que l'on utilisera dans le 'getelementbyID' (cf plus bas)
- Dim Script As String 'on déclare le script comme "string" afin de le déclencher en fin de VBScript
- Script = "<script language=""javascript"" type=""text/javascript"">" & vbNewLine
- Script &= " window.opener.document.getElementById(""" & idelement & """).value = """ & Calendar1.SelectedDate.ToShortDateString & """ ;" & vbNewLine
- Script &= " window.close();</" & "script>"
- Me.RegisterStartupScript("DateSelected", Script)
- End Sub
- </script>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title>Calendrier</title>
- </head>
- <body>
- <form id="Form1" method="post" runat="server">
- <asp:calendar id="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged" borderwidth="1px" backcolor="#FFFFCC" width="220px" daynameformat="Short" forecolor="#663399" height="200px" font-size="8pt" font-names="Verdana" bordercolor="#FFCC66" showgridlines="True" tooltip="Sélectionner une date">
- <selectorstyle backcolor="#FFCC66">
- </selectorstyle>
- <nextprevstyle font-size="9pt" forecolor="#FFFFCC">
- </nextprevstyle>
- <dayheaderstyle height="1px" backcolor="#FFCC66">
- </dayheaderstyle>
- <selecteddaystyle font-bold="True" backcolor="#CCCCFF">
- </selecteddaystyle>
- <titlestyle font-size="9pt" font-bold="True" forecolor="#FFFFCC" backcolor="#990000">
- </titlestyle>
- <othermonthdaystyle backcolor="AliceBlue">
- </othermonthdaystyle>
- </asp:calendar>
- </form>
- </body>
- </html>
'ChoixDate.aspx (le nom n'a pas d'importance)
NB: dans cet exemple, j'utilise un epage maitre ("dvpmt.master)..adpatez votre header de page en consequence (reference a la MaterPageFile)...les contentplace holder sont egalement a modifier, ainsi que les déclarations de paramètres (cf code dans la page)
<%@ Page Language="VB" MasterPageFile="~/dvpmt.master" Title="Page sans titre" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script language="javascript" type="text/javascript">
function ShowCalendarPopup(idel)
{
var url = "Calendar.aspx?id=" + idel //idel est l'ID de l'élément à remplir (déclaration dans l'appel...cf plus bas)
// on utilise cette déclaration d'URL (avec ?id=") afin de passer l'ID dans l'adresse de la page (méthode GET) pour récupérer cette ID dans le Popup
window.open(url,"Calendrier","width=238, height=218, resizable=no, toolbar=false, scrollbars=false, status=yes");
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form>
<div>Date Visite</div><asp:TextBox ID="visit" Class="tbg1" runat="server"></asp:TextBox>
<!-- ici j'utilise une image pour cliquer et ouvrir le popup, sinon vous pouvez utilisez un lien -->
<asp:ImageButton ID="bvisite" runat="server" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$visit')" />
<!--avec un quote simple, déclaration de l'ID comme paramètre (idel)
si vous n'utilisez pas de page maitre, "ctl00$ContentPlaceHolder1$" doit être omis, souvenez vous, l'ID du textbox est "visit"
pour info, lors de la compilation avec une page maitre, "ctl00$ContentPlaceHolder1$" est ajouté à l'ID (pour vérifier ce qui est ajouté: menu affichage puis Source' -->
<!-- exemple pour utiliser un lien-->
<a href="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$visit')">Ouvrir le Calendrier</a>
<!-- répétition du code avec a chaque fois la déclaration de l'ID du controle attenant à limage/lien-->
<div>Date Demande</div><asp:TextBox ID="demand" Class="tb1" runat="server"></asp:TextBox>
<asp:ImageButton ID="bdemand" runat="server" class="pic2" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$demand')" /><br />
<div>Date Remise Prix</div><asp:TextBox ID="rprix" Class="tbg1" runat="server"></asp:TextBox>
<asp:ImageButton ID="brprix" runat="server" class="pic1" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$rprix')" />
<div>Date Retour BE</div><asp:TextBox ID="retourbe" Class="tb1" runat="server"></asp:TextBox>
<asp:ImageButton ID="brbe" runat="server" class="pic2" ImageUrl="images/calendrierpic.gif" Height="25px" ImageAlign="Middle" Width="25px"
PostBackUrl="javascript:ShowCalendarPopup('ctl00$ContentPlaceHolder1$retourbe')" /><br />
</form>
</asp:Content>
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------
Calendar.aspx (le nom est important, car l'autre page l'appelle via la popup)
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Calendar.aspx.vb" Inherits="Calendar" %>
<!-- ici pas de page maitre, bah oui...sinon ca fait plus un popup ;) -->
<script language="vb" runat="server">
Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
Dim idelement As String : idelement = Request("id") 'c'est ici que l'on récupère l'ID du controle à remplir dans l'adresse
'idelement est la variable déclarée que l'on utilisera dans le 'getelementbyID' (cf plus bas)
Dim Script As String 'on déclare le script comme "string" afin de le déclencher en fin de VBScript
Script = "<script language=""javascript"" type=""text/javascript"">" & vbNewLine
Script &= " window.opener.document.getElementById(""" & idelement & """).value = """ & Calendar1.SelectedDate.ToShortDateString & """ ;" & vbNewLine
Script &= " window.close();</" & "script>"
Me.RegisterStartupScript("DateSelected", Script)
End Sub
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Calendrier</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:calendar id="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged" borderwidth="1px" backcolor="#FFFFCC" width="220px" daynameformat="Short" forecolor="#663399" height="200px" font-size="8pt" font-names="Verdana" bordercolor="#FFCC66" showgridlines="True" tooltip="Sélectionner une date">
<selectorstyle backcolor="#FFCC66">
</selectorstyle>
<nextprevstyle font-size="9pt" forecolor="#FFFFCC">
</nextprevstyle>
<dayheaderstyle height="1px" backcolor="#FFCC66">
</dayheaderstyle>
<selecteddaystyle font-bold="True" backcolor="#CCCCFF">
</selecteddaystyle>
<titlestyle font-size="9pt" font-bold="True" forecolor="#FFFFCC" backcolor="#990000">
</titlestyle>
<othermonthdaystyle backcolor="AliceBlue">
</othermonthdaystyle>
</asp:calendar>
</form>
</body>
</html>
Conclusion
A nouveau, merci à Jesusuonline pour le code de départ et à nhervagault pour son aide pour le code javascript.
n'hesitez pas a poster des questions, des notes, des critiques....négatives, positives, constructives, je prends tout ;)
Historique
- 26 novembre 2008 11:24:34 :
- mise en page plus claire
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Popup en .net [ par romain3395 ]
Bonjour,comment afficher un popup en .net ? Il n'existe que le javascript qui fait cela ?Sinon pour l'afficher en javascript, je fais :Response.Write(
Affichage d'un calendrier popup [ par Pepin21 ]
Bonjour, Voilà, j'utilise EW:CALENDARPOPUP pour afficher un calendrier qui me permet de saisir une date. Mon problème est le suivant :
Centrage d'une popup javascript [ par Jpeg69 ]
Bonjour tout le monde !Voila j'ai un petit souci. Je cherche un contrôle qui permet d'afficher un petit popup au centre de la page.J'ai beau parcourir
redirection via Popup avec action sur la fenêtre principale sous asp.net [ par elembro ]
code behind en vb.net script en javascriptVoici mon problème:j'ai un formulaire que l'on va appeller form1.aspx.Ce formulaire après validation se redi
Perte de session à l'ouverture de popup (asp + javascript) [ par awena ]
Bonjour,Mon problème est le suivant : à l'ouverture d'une popup en javascript (window.open) je perd systématiquement mon Session.Sessio
faire un popup en asp [ par sylvain64520 ]
Salut à tous, Je voulais savoir tout d'abord si on pouvait changer les valeurs des boutons 'ok' et 'annuler' des alert() (javascript) ? Dans le cas
Popup...récupérer une date d'un calendrier dans une popup en cliquant sur un bouton [ par asp_shamai ]
salut à tous...j'ai un problème, j'ai voulu remplacer le lien "afficher calendrier" relatif au code publié sur "RECUPERER LA DATE
Récupération de date [ par citt ]
Bonjour,J'ai une page aspx qui ouvre en javascript un calendrier. Lors de la selection d'un jour il lance un code javascript qui met a jour un textbox
alternative à server.CreateObject et ActiveXObject [ par didgy ]
Bonjour,je doit modifier un projet en asp avec javascript. Je cherche à créer une connexion avec un automate, la doc du serveur, qui est en vbscript d
|
Derniers Blogs
CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Forum
SCRIPTSCRIPT par nadialadypower
Cliquez pour lire la suite par nadialadypower
Logiciels
Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning Academy System (17.1.3.0)ACADEMY SYSTEM (17.1.3.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|