Adding Calendar Popup to Text Controls

• Download demo project - 32 Kb

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

<font color="#008000" size="2"><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>
 
</font>