A Better ASP.NET Datepicker and Calendar Control

Update (11^th April 2009)

This control is deprecated. I recommend using a client-side calendar control such as the jQuery UI datepicker.

Introduction

When developing enterprise ASP.NET applications, it is common to require the input of dates. The two solutions provided by .NET and Visual Studio out of the box; using a textbox with validation and using a calendar control, are both flawed. A textbox leaves too much scope for the user to make a mistake with data entry. Should the 15^th of January be written '15/1/06', '15/01/06', '15/01/2006', or '1/15/06'? Some users need to have a calendar to allow them to pick the correct date without regard to formatting.

However, for power users this can become much too slow, and the calendar control consumes too much precious screen realestate. The power user is capable of learning the acceptable date formats and would prefer to be able to enter the date in a textbox. This is also good for data entry, where the user does not want to have to leave the keyboard to use the mouse to pick a date.

What is needed is a custom control to combine the best of both worlds. It must allow power users to type a date in a textbox, and it must allow other users to select a date using a calendar control. Most importantly, it should seemlessly allow users to employ a combination of these two approaches.

The Solution

After a brief search of the internet failed to reveal an adequate control, I created the Eclipse Web Solutions DatePicker. The default view of the control features a textbox and a button. The textbox can be used for direct date entry, or the button can be clicked to use a calendar for date selection.

Implementation

The Eclipse Web Solutions DatePicker is implemented as an ASP.NET custom control and compiled with .NET 2.0. You can download the compiled DLL or the complete source code from the Eclipse Web Solutions downloads page. The design of the component is shown in the following diagram:

Usage

To use the Eclipse Web Solutions DatePicker control with Visual Studio 2005, follow these instructions:

• Create your web project.
• Add a reference to EclipseWebSolutions.CustomControls.dll. If you wish to debug the controls code use the debug version, else use the release version.
• Right-click the background of the Visual Studio toolbox and click 'Choose Items...'
• Click the browse button and find the EclipseWebSolutions.CustomControls.dll that you previously added a reference to.
• Find the DatePicker in the toolbox and drag it onto a web page.

• Select the DatePicker and set any properties that you wish to vary. The CollapseButtonLabel and ExpandButtonLabel properties change the button labels from the default '-' and '+'. The DateFormatString property changes the date format string that is used to display the date in the textbox from the default 'dd/MM/yy'.
• If you wish to change any properties of the textbox, calendar or button controls, you can do so in the code behind by accessing the control's public properties.
• In your application, access the value of the DatePicker through its DateValue property. If the DateValue == DateTime.MinValue then no date has been selected or an invalid date string was typed into the textbox.
• Run your program!

History

• Update (11^th April 2009) - This control is deprecated. I recommend using a client-side calendar control such as the jQuery UI datepicker.
• Update (25^th Jan 2007) - New Version now supports Microsoft AJAX 1.0