Update (11th April 2009)
This control is deprecated. I recommend using a client-side calendar control such as the jQuery UI datepicker.
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 15th 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.
The ASP.NET calendar control
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.
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.
DatePicker in textbox mode
DatePicker in calendar mode
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:
DatePicker class diagram
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.
The DatePicker control at design time
- Select the
DatePicker and set any properties that you wish to vary. The
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
- 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!
- Update (11th April 2009) - This control is deprecated. I recommend using a client-side calendar control such as the jQuery UI datepicker.
- Update (25th Jan 2007) - New Version now supports Microsoft AJAX 1.0
Liam McLennan has been developing for the internet since 2001. He is passionate about delivering top quality I.T. solutions that address his customer's needs.