Creating date data entry controls for a .NET web application can be
cumbersome because Visual Studio does not come with a standard date picker control (though it comes
with a Calendar control). The lack of such a control means that we usually have to create
at least two controls to accept dates from users, a TextBox control to hold the date and a
CompareValidator to make sure that entered information is a valid date. Obviously, we could
make do with a simple TextBox control and hope that users never enter an invalid date value
but we all know how this is going to work out.
Ideally, users should not have to enter any date information manually (although they should be able
if they so choose); the easier solution is to let users to select a date value from a calendar. This,
however, means that we have to add a number of additional controls and some code, be it JavaScript
or server-side code, to show and hide the calendar because it is usually impractical, at least from
a form layout standpoint, to have the Calendar control visible at all times.
In order to avoid having to recreate the same controls and code every time we need a control to enter
date information we decided to create a user control that can be reused not only within the same
project but also across projects. Obviously, we should create a custom control that can be compiled
to make the control truly reusable but for now a user control serves our purpose.
We already touched on some of the controls and features that our date user control should implement
but here is the entire list for completeness sake:
-
A TextBox control which displays the date value and allows users to enter the date
manually - the latter point is important because we do not want to limit the data input choices
users unnecessarily. Users should be free to use whatever method they are mostcomfortable with
to enter data, including date values.
-
A Calendar control that is used to select the date value – the date is entered into the
TextBox control after the user has selected a date. We use the standard Calendar
control that comes with Visual Studio to display the date picker.
-
An Image control to display the calendar – we only show the calendar when needed which
means that we need a control that can be clicked to make the Calendar control visible.
Note that we use a simple HtmlImage control in combination with JavaScript to change the visibility
of the Calendar control instead of a server control to avoid a postback to the server.
-
A CompareValidator control to validate the entered date information – users will still be
able to enter date values manually which means that we have to validate the entered information to
ensure the integrity of the data.
-
An optional RequiredFieldValidator control to make sure that users enter a date if the
date value is required – we make the use of the RequiredFieldValidator optional because we might
not always want to require the entry of a date value every time we use the date control.