Populating Form Inputs Using the Calendar ControlBy James Avery
Have you ever created a form with a text box where you needed the user to enter a date? For example, travel sites like Expedia.com have such text boxes for the user to enter their desired departure and arrival dates when booking a flight. Of course, making the user type date information into a text box is cumbersome and asking for trouble - for starters you've got to validate that the date is in the right format and things can get confusing for you (and your visitors) if you have non-US visitors entering dates in their DD/MM/YY format instead of the US MM/DD/YY format.
Our end goal is to create a calendar control that can be called from multiple asp and html pages and return the selected date to the form field. An example of what this article will show how to do can be seen below:
First Things First: The Form
The first thing we need to do to use our calendar control is to create a form that contains the text box where the date will be entered along with a link to the calendar control pop-up. Note that this form contains no ASP or ASP.NET code, meaning it can appear in an HTML page, in a classic ASP page, or on an ASP.NET Web page.
The code for this form is fairly striaght-forward. We start by declaring our form and giving it a
frmCalendar in this example). Next, we create a text box in the form with the name
txtDate. This is the text box that the user-selected calendar date will be inserted into.
That is, if the user selects March 1st from the calendar control, the text box will be populated with
3/1/2002. Realize that it is important that we name the form and text box, because the calendar control
pop-up needs to know this information so that when a date is selected from the control, it can automatically
fill in the appropriate text box.
Finally, our form needs a link next to the text box that will create the pop-up calendar window. In the example code below, only the minimal HTML is included - of course you can add other form fields to the form to collect other information.
Notice that the
window.open method is used to pop up a new window that will display the
calendar control (
calendar.aspx). Furthermore, this ASP.NET page is passed the name
of the form and text box form field through the QueryString (
frmCalendar.txtDate, in the
above example). This pop-up window is named
window calendar_window, and receives focus
once it is created, via the
Calendar.aspx - The Calendar Control Web Page
The goal of
Calendar.aspxis to display a calendar and, after the user has selected a date, fill in the text box in the form with the value of the date selected. Before we delve into how to accomplish this task, let's first examine the calendar control. The calendar control is a built-in Web control that ships with ASP.NET. To create it, simple use the following syntax:
This code produces a simple calendar allowing for the user to toggle between the months and to select a particular date. Be sure to check out the simple live demo to see the calendar control in action.
Do Something When a User Selects a Date
Ideally we'd like to be able to fill in the form's date text box when the user selects a date from the pop-up calendar control. To do this, we need to be able to determine when the user has clicked on a date. Whenever a user clicks on a date, the calendar control's
OnSelectionChangedevent fires. Therefore, we can write an event handler for this event. To create an event handler, we first must wire up the event in the calendar control like so:
Note that this event-handler, like all event handlers for ASP.NET Web controls, is a server-side
event handler. That is, when the user clicks on a date from the calendar control, the ASP.NET Web page
is posted back, making a round trip to the server; if the selected date had changed from the last
postback, the event handler is run before the resulting HTML is emitted back to the client.
For my application I created an event handler named
Calendar1_SelectionChanged, meaning the
OnSelectionChanged attribute in the calendar Web control would read:
OnSelectionChanged="Calendar1_SelectionChanged"; of course, you can give the event any
old name you'd like. Essentially, in the
Calendar_SelectionChanged event handler we will
Now that we've examined the basics of the calendar control, we're ready to look at some stylistic properties.
Once we've done this, we'll look at the code needed for the
OnSelectionChanged event handler
and wrap up this application and article! See Part 2 for the
remainder fo this article!