Extending the Calendar Control's Date NavigationBy Mehmet Genc
After using the Calendar control a number of times it quickly became clear that while the Calendar control was useful for selecting a date from the current, next, or previous month, the control could definitely do with a bit of improvement when users need to select dates far out in the future or past. The downside of the Calendar control is that it constricts a user to being able to only move from one month to another by clicking on the Previous/Next Month link buttons. This is fine if the target date is near the current date; after a couple of clicks you get to the desired month. But there are many situations where a user might need to, say, select a date eight months in the future. This would require that the user click on the Next Month hyperlink eight times.
While eight clicks might not seem like too big of a deal, there are plenty of other real-world examples that would require dozens of more clicks from the user. For example, a real estate Web application may need to allow the user to specify the lease end date, which could be anywhere from six months to several years in the future. A data-entry application might require that the user's birthdate be entered. Imagine trying to use a Calendar control to select the birthdate of an octogenarian - that would take over 950 clicks!
Clearly the Calendar control is not an adequate option for entering dates that may be several months or years in the future or past. However, with a bit of work we can enhance the Calendar control to include two drop-down lists, containing the months and years. This way, a user can quickly jump to a specific month or year with one click. In this article I will demonstrate how to make the Calendar control more flexible in terms of its navigation through the addition of two drop-down lists.
First Things First: Creating a Standard Calendar Control
Before we concern ourselves with extending the Calendar control to include drop-down lists for navigating to a particular month/year, let's first create a simple page that shows just the standard ASP.NET Calendar control (see the live demo).
When this page is visited, the Calendar control will be displayed in its default format, which requires that for a user to visit a particular month he must click on the next or previous month links, stepping through the calendar one month at a time.
Adding Drop-Down Lists to Jump to a Specific Month/Year
The standard Calendar control is not enough for us as we need to find a way of selecting any month in any year rather than using the Previous/Next Month links. One way of achieving this is using DropDownList controls to list all the months and the years we want to see, and then program the DropDownList controls in a way that whenever their selected index is changed the Calendar's display is updated to show the selected month and year.
At this point let's create two DropDownList controls in a table row and place them above the row where the Calendar control resides.
Now we need to populate the DropDownList controls. The month DropDownList needs to be populated with the twelve months of the year. These DropDownLists are populated using the methods below in the ASP.NET page's code portion.
Notice that the year DropDownList is populated with the years twenty years from the past to twenty years in the future. If you wanted to
populate this DropDownList with, say, all the years ten years in the past through ten years in the future, you could modify
For loop's bounds to:
For intYear = DateTime.Now.Year - 10 to DateTime.Now.Year + 10. The key
thing to see here is that
DateTime.Now.Year returns the year of the current date.
To populate these two DropDownLists, call the two above methods in the
Page_Load event handler (only on the first
load of the page, and not on subsequent postbacks). That is, the
Page_Load event handler should look like:
At this point we have added and populated two DropDownLists, enhancing the user interface for the Calendar control. However, we have yet to write code that will cause the DropDownLists, upon being changed, to reload the Calendar page, showing the requested month/year. This is our next and final task...
Completing the Extended Calendar Control
We are now ready to implement the final touches on this enhancement. First, let's tailor the HTML a bit so that the DropDownLists look like they are part of the Calendar control, as opposed to two separate elements. To accomplish this, I placed the DropDownLists and Calendar control in an HTML
<table>and used a stylesheet to specify some appearance-related settings (fonts, colors, and so on).
For this enhancement, I wanted the Calendar's date to automatically be updated anytime a user changed the month or year. In order
to have the DropDownLists postback whenever they are changed, you need to set the
AutoPostBack property to True.
Also create an event handler for the DropDownLists'
SelectedIndexChanged event. In my code I have both DropDownLists'
SelectedIndexChanged event call a single event handler:
Set_Calendar. This event handler - shown below -
updates the Calendar's date based on the month and year selections.
As you can see in the live demo, with this addition we have created an enhanced Calendar Web control, one that allows for the user to quickly navigate to a particular month and year.
Date fields are always a headache for us developers, as we want users to populate the date fields in a certain format. I believe the Calendar control is a great tool to achieve this rather than using date validation techniques. However, the default version of the Calendar control isn't applicable to all date field types (e.g. D.O.B., or dates far into the future) as it is cumbersome to navigate. By adding a couple of DropDownLists, as I have shown in this article, you can enhance the Calendar to allow for your users to quickly reach a desired month and year.
For more information on enhancing the Calendar control, be sure to read the following 4Guys articles:
- Populating Form Inputs Using the Calendar Control
- A "Highlightable" Calendar Control
- Building an Event Calendar Web Application