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

Télécharger le projet
Commenter

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 ;)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (jesusonline)