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:

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:

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:

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:

/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):

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:

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:

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:

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:

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:

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.

When I try to register the dll I get 'The module "DatePickerControl.dll" was loaded but the entry-point DLLRegisterServer was not found. Make sure that "DatePickerControl.dll" is a valid DLL or OCX file and then try again.'

This is a nice looking DatePicker. I can reference is on my code page if I simply drop it on the page. But if I convert a data field in a gridview into a template field and drop the datepicker, the form doesn't see it. How can I referenct it in a form? I need to say something like:

Nice date picker but I can't modify the css. My question is related to the css of the date picker. The date are not visible as the font colour is white and background colour white also. I really wan na use this date picker but can't modify the css

Hello,I used date picker control about a year ago and it was working fine in all browsers. I noticed recently that is not working on chrome but it is working fine on IE. Any ideas why this is happening?

Really nice. I have multiple controls on the same page. If I set the ClientIdMode to static they all populate the first one on the page. Works great for AutoID or Predictable. Any idea why? or how to stop it?

Hi, I use master pages and user controls which get loaded once application starts. The first time I load a multiview, the dates are populated and displayed, but the second time i open the multiview with a new set of data the date box is blank. Please help cause this date picker is excellent allows for general date pick and DOB's. Thanks

hey thereI've been using your control lately, and kudos, you've done a great job, and thank you.But my questions are:1) How come i can only get it to work in Google Chrome? It doesn't function properly (or at all) in IE8 or Firefox with me...I don't know if I'm missing some kind of javascript activex thing or what not2) How can I change the formatting to include the name of the day, as well?

However one issue I have found is that when the date format is set to a long format such as dd MMMM yyyy, the date value / range that appears in the popup is always the current date, not the one that the control is currently set to.

e.g. if I select a date using the popup of 12th June 2013, this gets updated to the text box. If I then go back to select a new date, the popup display defaults to today's date, not 12th June 2013. This only occurs with long date formats - if a standard short date is used then the popup defaults to the date previosly selected.

I just implemented your datepicker in a website where I am managing a number of dates and I thought this would be an excellent option. I simply referenced the .dll in the project and then went to test run it. The project is nothing fancy - just a master page with content pages and a few custom user controls. When I select the graphic it takes over the entire screen rather than simply creating a popup. Your update says that css and javascript files are automatically included. Is that accurate or do I need to include some manually?

Here's the html:

Start Date:

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

and in the code-behind I'm setting the datepicker CalendarDate attribute

dpStartDate = object.StartDate;

Any suggestions? I'm posting this as a bug, but it may just be some inexperience using your control. Thanks for the help.

You should not need to manually include anything. Just drag'n'drop the DatePicker control to a web form.It should look like the screenshot on the top of this page when you run the web application and click on the calendar image!

If you have Firebug or something similar installed, you can check whether there are failed HTTP requests to WebResource.axd (these requests are made for the CSS and JavaScript files).

I would like to know how exactly did you solve the problem of using this inside the updatepannel. I tried an old version of it and I couldn't get where the problem was. (The document.getElementById on the JS don't work in this older version, how did you solve it?)