Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

Date Picker User Control

Rate me:
Please Sign up or sign in to vote.
4.66/5 (43 votes)
2 Dec 2011CPOL6 min read 370.5K   18.2K   99   123
A date picker user control in ASP.NET (C#, VS2010)
Image 1

Introduction

This is a simple date-picker control that comes as an ASP.NET custom control. The user can either enter a date into a textbox or click on an icon which opens a pop-up calendar. JavaScript is used to display the pop-up calendar. The control can easily be integrated in your own ASP.NET websites by simply referencing the Assembly and drag'n'drop the control from the toolbox onto your web form.

Background

This control is originally based on another CodeProject article. In my first release back in 2007, I overworked the control so it compiles with VS2005 and works with the latest versions of Firefox and Internet Explorer. I fixed some JavaScript errors and added better design time support and data-binding. In the first release, the date-picker control was a so called User Control (.ascx file) which you had to include in your ASP.NET web project, together with some JavaScript, CSS and image files.

Now, in 2011, I publish a new major release. This time, the date-picker is implemented as a Custom Control. This means that it comes as an Assembly (DLL file) which you can simply reference from your ASP.NET web application and then drag'n'drop from the toolbox onto your web form. All required resources like JavaScript, CSS or images files are included in the single DLL and loaded as web resources.

Using the Code

To use the date picker control in your own web project, simply add a reference to the DatePickerControl.dll which you can download from the link at the top of this page.

To manually add a datepicker instance to an .aspx form, add the following code:

ASP.NET
<%@ Register assembly="DatePickerControl" 
namespace="DatePickerControl" tagprefix="cc1" %>

<cc1:DatePicker ID="DatePicker1" runat="server" />

If you want to have the datepicker control into your toolbox, you need to manually add it. To do so, right click into the toolbox and select "Choose items..." from the context menu. Then click on the "Browse..." button and select the DatePickerControl.dll. A new control will appear in your toolbox which you can drag'n'drop to any web form:

Image 2

What I Have Learned

During the development of this custom control, I learnt a lot of things about custom control development. There are a few points of interest I like to share.

Web Resources

My control is using additional resources like images, CSS and JavaScript files. Because I wanted everything to be included into a single DLL, I added all the required files as "embedded resources". Make sure that the "Build Action" in the properties for all the resource files is set to "Embedded Resource". Then you need to edit the "AssemblyInfo.cs" file and add a "WebResource" declaration for each file that you want to access via an auto-generated URL:

C#
[assembly: System.Web.UI.WebResource("DatePickerControl.Resources.popcalendar.css", 
	"text/css")]
[assembly: System.Web.UI.WebResource("DatePickerControl.Resources.popcalendar.js", 
	"text/javascript", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource("DatePickerControl.Resources.calendar.gif", 
	"image/gif")]    

To get the URL to one of the resource files, use the "Page.ClientScript.GetWebResourceUrl" method. For example, to include the JavaScript file, I use the following code:

C#
Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "js",
   Page.ClientScript.GetWebResourceUrl(this.GetType(),
   "DatePickerControl.Resources.popcalendar.js"));

It is very important to add the assembly name to the string passed to the "Page.ClientScript.GetWebResourceUrl" method!

BTW: The URL returned by the "Page.ClientScript.GetWebResourceUrl" method looks something like this:

HTML
/WebResource.axd?d=VKJPowiRQrngH4t6...wQza83c1&t=634583660937215237

Property Default Values

I also wanted some design time support, for example properties of my control should have a default value. And I wanted the default value to appear as default (=not bold) in the property grid, whereas non-default values should appear as non-default (=bold):

Image 3

In case of String, Int or Enum properties, this is pretty easy and can be achieved by adding some extra attributes to the property declaration:

C#
[Category("Appearance")]
[Description("Day to start week with.")]
[Browsable(true)]
[DefaultValue(Weekday.Monday)]
public Weekday StartWeekWithDay
{

But for the DateFormat property, I wanted the default to be culture dependent: On a European Windows installation, the default date format should be dd.MM.yyyy, whereas on U.S. system, the default should be MM/dd/yyyy. How could this be done? Fortunately, we can also write our own code to set the default value of a property. To do so, we have to add two private methods for the property. These methods must be named Reset...() and ShouldSerialize...(), where the ... is replaced with the name of the property. Let's look at the DateFormat property:

C#
public string DateFormat
{
    get { return dateFormat; }
    set { dateFormat = value; }
}

private void ResetDateFormat()
{
    DateFormat = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
}

private bool ShouldSerializeDateFormat()
{
    return (!DateFormat.Equals
	(CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern));
}

The ResetDateFormat() method just sets the property to whatever should be your default value. The ShouldSerializeDateFormat() method returns a boolean that is used to determine whether the property value needs to be serialized. This is only the case if it is different from its default value.

HTML Design Time

In the designer, the date picker control is displayed quite different than on a real web page. Unfortunately, I could not figure out a way to display the calendar image from the embedded resources during design-time:

Image 4

However, I learned that you can control the HTML that is used to render a control during design-time by adding a class inherited from "ControlDesigner" to your control DLL. The class must be named the same as the control but with a "Designer" suffix. For the "DatePicker" control, this class would be named "DatePickerDesigner". Within this class, the "GetDesignTimeHtml()" method can be overridden to return a custom HTML string.

CSS and JavaScript Include

If you place the date picker control onto a web form, it should automatically include the required CSS and JavaScript files. However if you place two or more date picker controls on the same page, these files should only be included once. To include a JavaScript file, the "RegisterClientScriptInclude" method can be used:

C#
Page.ClientScript.RegisterClientScriptInclude
	(this.GetType(), "js", "your_javascript.js");

This method automatically ensures that the same JavaScript is only included once, even if the method is called multiple times from multiple control instances.

Including a CSS file is a bit more complicated. As we all know, CSS files should be included within the <head></head> tags of your web page. The controls within the page header can be accessed via the "Page.Header" property. A link to a CSS file can be added using the following code:

C#
LiteralControl include = new LiteralControl
    ("<link href='your_css.css' rel='stylesheet' type='text/css' />");
Page.Header.Controls.Add(include);  

But how can we make sure that the same CSS is only included once if multiple date picker controls are added to the same page? We can make use of the "RegisterClientScriptInclude" method mentioned before. There is another method "Page.ClientScript.IsClientScriptIncludeRegistered" that we can use to query whether a JavaScript has already been included or not. So we can simply include the CSS only if the JavaScript has not already been included.

History

  • December 2007 -- Original version posted
  • April 2009 -- Updated (many bugfixes, moved to VS2008, examples added)
  • August 2010 -- Updated source code and demo
  • December 2011 -- Rewritten as a custom control, everything compiled into one DLL, moved to VS2010, more examples added

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Sevitec Informatik AG
Switzerland Switzerland
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
BugDon't use an ID called "caption Pin
Mike From Oz31-Oct-20 19:21
Mike From Oz31-Oct-20 19:21 
QuestionValue getting lost Pin
David Radcliffe7-Sep-18 1:13
David Radcliffe7-Sep-18 1:13 
Questionhow set value or clear this control on code behind Pin
waqi233-Apr-18 18:30
waqi233-Apr-18 18:30 
QuestionPerformSubstitution Pin
siddiqueharunany11-Jun-17 0:13
siddiqueharunany11-Jun-17 0:13 
GeneralDisable date field for direct entry/type in Pin
Member 1137604621-Apr-17 3:58
Member 1137604621-Apr-17 3:58 
QuestionThe Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). Pin
Member 101991947-Oct-15 23:02
Member 101991947-Oct-15 23:02 
QuestionDLL Won't Register Windows 10 Pin
ormonds7-Sep-15 14:22
ormonds7-Sep-15 14:22 
QuestionCan't reference the DatePicker if template field Pin
Member 1151984316-Mar-15 10:28
Member 1151984316-Mar-15 10:28 
Questiona question about this control in Stackoverflow Pin
Mohamad Shawkey31-Jul-14 2:58
Mohamad Shawkey31-Jul-14 2:58 
QuestionDatePicker with Required Field Validator and allow type property Pin
Mohamad Shawkey30-Jul-14 6:30
Mohamad Shawkey30-Jul-14 6:30 
QuestionPlease add as a Nuget package Pin
yodamon22-Jul-14 6:00
yodamon22-Jul-14 6:00 
QuestionClear the field!!! urgent Pin
perlita2426-May-14 4:55
perlita2426-May-14 4:55 
AnswerRe: Clear the field!!! urgent Pin
AR_Libertarian21-Feb-18 13:44
AR_Libertarian21-Feb-18 13:44 
AnswerRe: Clear the field!!! urgent Pin
Ercole Spiteri19-Jun-18 1:31
Ercole Spiteri19-Jun-18 1:31 
Questionhow to pick value from datepicker Pin
Member 1060800618-Feb-14 21:42
Member 1060800618-Feb-14 21:42 
QuestionRe: how to pick value from datepicker Pin
Member 1056592528-May-15 1:57
Member 1056592528-May-15 1:57 
AnswerRe: how to pick value from datepicker Pin
Member 1327255521-Jun-17 18:36
Member 1327255521-Jun-17 18:36 
QuestionDatepicker css Pin
jamesonkeju9-Feb-14 22:50
jamesonkeju9-Feb-14 22:50 
NewsDTPicker User Control Pin
gustavoz17-Oct-13 4:13
gustavoz17-Oct-13 4:13 
QuestionDate picker control not working on Chrome 29 Pin
Mr Nicolaides4-Sep-13 2:27
Mr Nicolaides4-Sep-13 2:27 
QuestionHow can I desactivate the textbox?? Pin
Member 953345519-Jul-13 23:36
Member 953345519-Jul-13 23:36 
QuestionHow to assign date to the control Pin
Thaupeek11-Jun-13 3:06
Thaupeek11-Jun-13 3:06 
AnswerRe: How to assign date to the control Pin
rawl20004-Aug-14 9:55
rawl20004-Aug-14 9:55 
QuestionMarch 2013 is showing only 30days! Pin
dasarathM9-Apr-13 9:08
dasarathM9-Apr-13 9:08 
QuestionMultiple Controls All Update First One - StaticID Pin
Toyist2-Mar-13 11:05
Toyist2-Mar-13 11:05 

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

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