Recuperer la date d'un calendar ouvert dans une popup [debutant]

Soyez le premier à donner votre avis sur cette source.

Vue 33 412 fois - Téléchargée 2 579 fois

Description

Ce code permet simplement d'ouvrir un calendrier dans une popup, on clique sur une date, la popup se referme, et le textbox de la page d'origine se remplit avec la date selectionnés. Suite à un commentaire, j'ai mis un Comparevalidator plutot qu'un RegularExepressionValidator pour vérifier la date. J'ai aussi rajouté un RequiredFieldValidator pour empecher une presence de date vide ;)

Ce petit bout de code m'a été inspiré suite à une question sur le forum, il n'y a rien de compliqué, mais ca peut aider beaucoup de débutant. je me sert d'un control calendar, j'ai modifié le style à partir des styles prédéfinis dans Visual Studio. J'ai pas fait de code-behind, pour que ce soit plus simple aux débutants.

Au debut je voulais faire ce code dans un custo control, c'est à dire dans une assembly (dll) mais je me suis dit que ce serait trop compliqué pour les debutants. Je ferais peut etre, ce meme code dans un control composite avec des templates etc... reservé aux personnes ayant déjà de bonne connaissance en .net.

Les deux fichiers de codes sont dans le zip, vous n'avez rien à configurer, juste à placer ces deux fichiers dans un repertoire IIS (par exemple c:/inetpub/wwwroot/testcalendar/) et ensuite chargé la page ChooseDate (http://localhost/testcalendar/chooseDate.aspx)

Il y a deux versions, une version qui ouvre une popup et une version qui ouvre un calendrier à l'interieur meme de la page, je sais qu'il doit y avoir des bugs, mais j'ai prefere ne pas complexfier plus le code, cette source ce veut pour les débutant

Source / Exemple :


'ChooseDate.aspx (le nom n'a pas d'importance)

<%@ Page Language="vb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
		<title>ChooseDate</title>
<script runat="server" language="vb">

    Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Dim Script As String
        Script = "<script language=""javascript"" type=""text/javascript"">" & vbNewLine
        Script &= "     document.getElementById(""TextBoxDateInline"").value = """ & Calendar1.SelectedDate.ToShortDateString & """ ;" & vbNewLine
        Script &= "</" & "script>"

        Me.RegisterStartupScript("DateSelected", Script)
    End Sub

    Private Sub ButtonValidate_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
        'Il est necessaire de valider la page, car la date n'est pas 
        'obligatoirement valide lorsqu'elle arrive ici, en effet malgré
        'la presence d'un validator, si le client desactive javascript, la 
        'verification ne sera pas effectué chez le client, il faut
        'l'effectuer sur le serveur via la méthode Validate de l'objet Page
        'Pour vérifier désactiver Javascript, et rentrait une date quelconque
        Page.Validate()
        If Page.IsValid Then
			'mais par précautions, si un utilisateur arrive à trouver une date
			'valide pour le validator et non par la réalité, mieux vaut mettre un try
			Try
				LblSelectedDate.Text = " Vous avez selectionné le " & DateTime.Parse(TextBoxDate.Text).ToLongDateString
			Catch
				LblSelectedDate.Text = "La date n'est pas valide"
			End Try
        Else
            LblSelectedDate.Text = "La date n'est pas valide"
       End If
	End Sub
</script>
		<script language="javascript" type="text/javascript">
			function ShowCalendarPopup() 
			{
				window.open("Calendar.aspx","Calendar","width=238, height=218, resizable=yes, toolbar=false, scrollbars=false, status=yes");
			}
			function ShowCalendarInline() 
			{
				document.getElementById("CalendarInLine").style.display = "inline";
			}
			function HideCalendarInline() 
			{
				document.getElementById("CalendarInLine").style.display = "none";
			}
	
		</script>
</head>
	<body>
	
		<form id="Form1" method="post" runat="server">
			<h1>Version popup
			</h1>
<p>Date : <asp:textbox id="TextBoxDate" runat="server" maxlength="11" tooltip="jj/mm/aaaa">31/01/1986</asp:textbox>
				<a href="javascript:ShowCalendarPopup();">Afficher le calendrier</a>
				<br>
				<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ErrorMessage="Vous devez selectionner une date" ControlToValidate="TextBoxDate" Display="Dynamic"></asp:RequiredFieldValidator>
				<asp:CompareValidator id="CompareValidator1" runat="server" ErrorMessage="La date n'est pas valide" ControlToValidate="TextBoxDate" Type="Date" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator></p>
			<p><asp:label id="LblSelectedDate" runat="server"></asp:label></p>
			<p><asp:button id="ButtonValidate" runat="server" text="Valider" onclick="ButtonValidate_Click"></asp:button></p>
<p>
<hr>

<p></p>
<h1>Version inline (sans popup)</h1>
<p>Date : <asp:textbox id="TextBoxDateInline" runat="server" tooltip="jj/mm/aaaa" maxlength="11">31/01/1986</asp:textbox><a 
href="javascript:ShowCalendarInline();">Afficher le calendrier</a> </p>
<p id="CalendarInLine" style="display:none">		
	<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>
			<br/>
	<a href="javascript:HideCalendarInline();">Cacher le calendrier</a> 		

</p>
<p> <br><asp:RequiredFieldValidator id="RequiredFieldValidator2" runat="server" Display="Dynamic" ControlToValidate="TextBoxDate" ErrorMessage="Vous devez selectionner une date"></asp:RequiredFieldValidator><asp:CompareValidator id="CompareValidator2" runat="server" ControlToValidate="TextBoxDate" ErrorMessage="La date n'est pas valide" display="Dynamic" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator></p>
<p><asp:label id="Label1" runat="server"></asp:label></p>
<p><asp:button id="Button1" onclick="ButtonValidate_Click" runat="server" text="Valider"></asp:button></p>
		</form>
	</body>
</html>

Calendar.aspx (le nom est important, car l'autre page l'appelle via la popup)

<%@ Page Language="vb" %>

<script language="vb" runat="server">

    Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Dim Script As String
        Script = "<script language=""javascript"" type=""text/javascript"">" & vbNewLine
        Script &= "     window.opener.document.getElementById(""TextBoxDate"").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 :


Dites moi ce que vous en pensez en bien ou en mal, c'est toujours bon d'avoir l'avis des autres et n'oubliez pas : une note fait toujours plaisir ;)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
samedi 10 décembre 2005
Statut
Membre
Dernière intervention
14 juin 2007

moi aussi j'aimerai bien un cas concret du calendrier et du textbox. Je veux le faire en C#. J'ai regardé plusieurs code, mais c'est souvent en VB et j'arrive pas à l'adapter.
Merci d'avance
Messages postés
11
Date d'inscription
mercredi 1 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2010

Salut a tous,
Voila je suis entrain de developper en asp.net C# sur Web developer et jai un peu de mal a creer ce "calendrier-popup" ki m'aiderai a prendre une date selectionnée et la mettre dans un label.

C'est mon maitre de stage qui va pas etre content si jy arrive pas :s lol

merci de m'aider ca serai simpas ^^
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
22
A mon avis c'est une histoire de postback :s mais j'ai pas le temps de regarder, faudrais voir pour sauvegarder le viewstate et ainsi à chaque postback réafficher le truc.

Bon courage :)
Messages postés
39
Date d'inscription
mardi 20 mai 2003
Statut
Membre
Dernière intervention
22 février 2006

>Salut Cyril
>j'ai regardé ton code, et je sens qu'il va vraiment me servir merci beaucoup.
>
>par contre je voulais savoir pourquoi dans ta version sans popup lorsqu'on change de mois, le calendrier disparait ?
>
>comment pourrait-on y remédier.
>
>est ce que ça serait à cause de l'objet calendrier qui le compte comme un onchange.
Messages postés
89
Date d'inscription
lundi 29 avril 2002
Statut
Membre
Dernière intervention
6 décembre 2006

Est ce normal que sur ta version sans popup dés que tu changes de mois le calendrier disparait???
c'est un peu genant...
sinon impec pour le reste
merci
a+
Afficher les 22 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.