Click here to Skip to main content
Click here to Skip to main content
Go to top

Adding Calendar Popup to Text Controls

, 19 Sep 2005
Rate this:
Please Sign up or sign in to vote.
Adding Calendar popup on doubleclick

Sample Image - DateSelector.jpg

Introduction

Well I'm back with a new small usercontrol. a few days ago one of my customers asked me if it was possible to give a user the possibility of either writing a date in a textfield or just doubleclick it to get a Datepicker, so i made this control. This control adds the Date pick to Labels , TextBox, HTML inputfields and Divs. What it does is when bound to the mentioned controls is adding the ability of double clik a control and the popup a DatePicker. you can have as many datepickers on a page as you like and it easy to change the look of the control by using VS Calandar properties. To use the control just add the control to your project by using the add existing in solution explorer. select the files "Remember the close.jpg". Then drag the control to the page where you want to use it, and set the properties.

You must set the following 3 properties on the DateSelector control.

DateFormat="dd-MM-yyyy". This property set the dateformat to your liking, defaults to localdatetime if not set.

ParentControlId="TextBox1". The id of the control you which to bind to.

PrevDate="true". Is it allowed to select a date previous to today's date. When this is set to false the control sets the date to todays date if date selected is older than todays date.

The javascript is tested to run in Opera 8.0, Firefox 1.06 and IE 6+

The Demo project provided show the use of the control.

NEW:

I have updated the control since it used absolute positioning on parent controls

Now it will open the calendar according to mouse positioning and you can place the close.jpg anywhere in your project

// Programmer Jan Nielsen

<P>// Date: 02/08/2005</P><P>namespace LivingTest</P><P>{</P><P>using System;</P><P>using System.Data;</P><P>using System.Drawing;</P><P>using System.Web;</P><P>using System.Web.UI.WebControls;</P><P>using System.Web.UI.HtmlControls;</P><P>using System.IO;</P><P>/// <summary></P><P>/// Summary description for DateSelector.</P><P>/// </summary></P><P>public class DateSelector : System.Web.UI.UserControl</P><P>{</P><P>protected System.Web.UI.WebControls.Calendar Calendar1;</P><P>protected DirectoryInfo info;</P><P>private bool monthChanged = false;</P><P>private string cName;</P><P>private string cNameClientId;</P><P>private string controlId ;</P><P>private string dateFormat = DateTime.Now.ToString();</P><P>protected System.Web.UI.HtmlControls.HtmlImage IMG1;</P><P>private string imgUrl;</P><P>private bool prevDate = false;</P><P>private string Date;</P><P>private string top;</P><P>private string left;</P><P>private string imgPath = "";</P><P>private void Page_Load(object sender, System.EventArgs e)</P><P>{</P><P>controlId=this.ID+cName;</P><P>Calendar1.VisibleDate = DateTime.Today;</P><P>setImg();</P><P>}</P><P>// finds and set the closebutton image on popup</P><P>private void setImg()</P><P>{</P><P>DirectoryInfo i = new DirectoryInfo(Request.PhysicalApplicationPath);</P><P>getDir(i);</P><P>imgPath = imgPath.Replace(i.Root.ToString(),"");</P><P>imgPath = imgPath.Replace(@"\","/");</P><P>imgPath = imgPath.Remove(0,imgPath.IndexOf('/'));</P><P>imgUrl = imgPath + "/close.jpg";</P><P>}</P><P>// Dont know were you place your usercontrol so i look in all dirs on the website to find it</P><P>// returns the path of the close button </P><P>private void getDir(DirectoryInfo inf)</P><P>{</P><P>foreach(DirectoryInfo i in inf.GetDirectories())</P><P>{</P><P>if(i.GetFiles("DateSelector.ascx").Length > 0)</P><P>imgPath = i.FullName;</P><P>if(i.GetDirectories().Length > -1)</P><P>getDir(i);</P><P>}</P><P>}</P><P>#region Web Form Designer generated code</P><P>override protected void OnInit(EventArgs e)</P><P>{</P><P>//</P><P>// CODEGEN: This call is required by the ASP.NET Web Form Designer.</P><P>//</P><P>InitializeComponent();</P><P>base.OnInit(e);</P><P>}</P><P></P><P>/// <summary></P><P>/// Required method for Designer support - do not modify</P><P>/// the contents of this method with the code editor.</P><P>/// </summary></P><P>private void InitializeComponent()</P><P>{</P><P>this.Calendar1.VisibleMonthChanged += new System.Web.UI.WebControls.MonthChangedEventHandler(this.Calendar1_VisibleMonthChanged);</P><P>this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);</P><P>this.Load += new System.EventHandler(this.Page_Load);</P><P>}</P><P>#endregion</P><P>/// <summary></P><P>/// Set Date format defaults to Local DateTimeFormat if not set</P><P>/// </summary></P><P>public string DateFormat</P><P>{</P><P>set{dateFormat = value;}</P><P>get{return dateFormat;}</P><P>}</P><P>/// <summary></P><P>/// navnet på den control hvor dato skal vises</P><P>/// </summary></P><P>public string ParentControlId</P><P>{</P><P>set{cName = value;}</P><P>}</P><P>/// <summary></P><P>/// returns the controlId to javascript a composite id so each datetime control gets a unik Id</P><P>/// set in pageload</P><P>/// </summary></P><P>public string ControlId</P><P>{</P><P>get{return controlId;}</P><P>}</P><P>/// <summary></P><P>/// Set the value for the close image</P><P>/// </summary></P><P>public string ImgUrl</P><P>{</P><P>set{imgUrl = value;}</P><P>get{ return imgUrl;}</P><P>}</P><P>/// <summary></P><P>/// allows or disallows to chose a date older than todays date</P><P>/// </summary></P><P>public bool PrevDate</P><P>{</P><P>set{prevDate = value;}</P><P>}</P><P>/// <summary></P><P>/// ensure that if we change month the control is still visible</P><P>/// </summary></P><P>public void showDate()</P><P>{</P><P>if(monthChanged)</P><P>Response.Write("<script language="'javascript'">document.getElementById('"+controlId+"').style.visibility = 'visible';</script>");</P><P>}</P><P>/// <summary></P><P>/// left position of the control</P><P>/// </summary></P><P>public string posLeft</P><P>{</P><P>set{left = value;}</P><P>get{ return left;}</P><P>}</P><P>/// <summary></P><P>/// right position of the control</P><P>/// </summary></P><P>public string posTop</P><P>{</P><P>set{top = value;}</P><P>get{ return top;}</P><P>}</P><P>/// <summary></P><P>/// get the TextControl used by javascript</P><P>/// </summary></P><P>public string ControlClientId</P><P>{</P><P>get{ </P><P>Object s = new Object();</P><P>s = (Object)this.Parent.FindControl(cName);</P><P>if(s.GetType() == typeof(Label))</P><P>{</P><P>cNameClientId = ((Label)s).ClientID;</P><P>}</P><P>if(s.GetType() == typeof(TextBox))</P><P>{</P><P>cNameClientId = ((TextBox)s).ClientID;</P><P>}</P><P>if(s.GetType() == typeof(HtmlInputText))</P><P>{</P><P>cNameClientId = ((HtmlInputText)s).ClientID;</P><P>}</P><P>if(s.GetType() == typeof(HtmlGenericControl))</P><P>{</P><P>cNameClientId = ((HtmlGenericControl)s).ClientID;</P><P>}</P><P>return cNameClientId;</P><P>}</P><P>}</P><P> </P><P>/// <summary></P><P>/// writes the selected date back to the ParentControl</P><P>/// </summary></P><P>private string setDate </P><P>{</P><P>set{</P><P>Object s = new Object();</P><P>s = (Object)this.Parent.FindControl(cName);</P><P>if(s.GetType() == typeof(Label))</P><P>{</P><P>((Label)s).Text = value;</P><P>cNameClientId = ((Label)s).ClientID;</P><P>}</P><P>if(s.GetType() == typeof(TextBox))</P><P>{</P><P>((TextBox)s).Text = value;</P><P>cNameClientId = ((TextBox)s).ClientID;</P><P>}</P><P>if(s.GetType() == typeof(HtmlInputText))</P><P>{</P><P>((HtmlInputText)s).Value = value;</P><P>cNameClientId = ((HtmlInputText)s).ClientID;</P><P>}</P><P>if(s.GetType() == typeof(HtmlGenericControl))</P><P>{</P><P>((HtmlGenericControl)s).InnerHtml = value;</P><P>cNameClientId = ((HtmlGenericControl)s).ClientID;</P><P>}</P><P></P><P>Date = value;</P><P>}</P><P>}</P><P>/// <summary></P><P>/// just calling setDate with the selected value</P><P>/// </summary></P><P>/// <param name="sender"></param></P><P>/// <param name="e"></param></P><P>private void Calendar1_SelectionChanged(object sender, System.EventArgs e)</P><P>{</P><P>monthChanged = false;</P><P>if(prevDate)</P><P>{</P><P>setDate = ((Calendar)sender).SelectedDate.ToString(dateFormat);</P><P></P><P>return;</P><P>}</P><P>if(((Calendar)sender).SelectedDate >= DateTime.Now )</P><P>{</P><P>setDate = ((Calendar)sender).SelectedDate.ToString(dateFormat);</P><P></P><P>}</P><P>else</P><P>{</P><P>setDate = DateTime.Now.ToString(dateFormat);</P><P></P><P>}</P><P>}</P><P>/// <summary></P><P>/// set the value to monthChanged if changing months</P><P>/// </summary></P><P>/// <param name="sender"></param></P><P>/// <param name="e"></param></P><P>private void Calendar1_VisibleMonthChanged(object sender, System.Web.UI.WebControls.MonthChangedEventArgs e)</P><P>{</P><P>monthChanged = true;</P><P>}</P><P>}</P><P>}</P>
 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Wyxlwiis
Web Developer
Denmark Denmark
Im a software developer and MCAD
 
I love .NET and the pure object oriented and event driven programming philosophy.

Comments and Discussions

 
GeneralDoes this work in VB6 PinmemberMember 373499218-Feb-08 13:26 
GeneralDoes this work with ASP.NET 2.0 PinmemberWilliam D. Beaty11-Jul-07 9:23 
GeneralNice popup control, but Pinmemberpwhummel1-Nov-05 3:43 
GeneralRe: Nice popup control, but PinmemberWyxlwiis1-Nov-05 5:37 
GeneralGreat User Control PinmemberVictory20006-Oct-05 4:11 
GeneralOld version Pinmemberkamlakar19-Sep-05 22:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 20 Sep 2005
Article Copyright 2005 by Wyxlwiis
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid