When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Saturday, March 2, 2002

Populating Form Inputs Using the Calendar Control

By James Avery


Introduction


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.

- continued -

I had such a task laid out in front of me recently and decided that I wanted to offer a calendar display to aid the user in choosing the date, similar to the way Expedia.com and other sites do. By using a calendar, the ambiguity of the date format (MM/DD/YY vs. DD/MM/YY) is removed, and there is less room for user-entered error. Providing a calendar option for selecting a date is amazingly easy in ASP.NET due in large part to the build-in ASP.NET calendar control. By simply employing this Web control and a little bit of JavaScript code we can add this calendar choosing functionality to forms on both ASP.NET Web pages and classic ASP pages!

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:


Select a Departure Date:


Calendar


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 name (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.

<form name="frmCalendar">
   <input name="txtDate" type="text" />
   <a href="javascript:calendar_window=window.open('/calendar.aspx?formname=frmCalendar.txtDate','calendar_window','width=154,height=188');calendar_window.focus()">
      Calendar
   </a>
</form>

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 .focus() method.

Calendar.aspx - The Calendar Control Web Page


The goal of Calendar.aspx is 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:

<asp:Calendar id="id" runat="server" />
[View a live demo!]

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 OnSelectionChanged event 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:

<asp:Calendar id="id" runat="server" OnSelectionChanged="eventHandler" />

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 render client-side JavaScript code that will pass the selected date back to the form.

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!

  • Read Part 2!



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article