Populating Form Inputs Using the Calendar Control 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. 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: 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! In Part 1 we looked at how to create a general calendar control and explained the aim of this article: to create a calendar pop-up to facilitate selecting a date for a form field text box. In this part we'll complete the application by examining how to "beautify" our calendar control and add the essential functionality. Making the Calendar Control Pretty! Since by default there is no selected date on the calendar we are going to capture the OnDayRender event so we can change the background color of the current date to a different color. We could also change the font size, or make the date bold if we wanted to. We can easily accomplish this by adding an event handler to our control like so: <asp:Calendar id="id" runat="server" OnSelectionChanged="eventHandler" OnDayRender="methodName" />
續： Here the EventHandler is the name of the evant handler that you must provide to handle the OnDayRender event. Note that for my application I created a function named Caledar1_dayrender to override handle this event. There are a few more properties we may wish to set to make the calendar control more useful. One important one is to set the SelectionMode to Day, which limits the user to selecting a single day as opposed to a range of dates. There are a number of UI/stylistic properties you may wish to set as well, such as BorderColor, BackColor, DayNameFormat, TitleStyle, etc. You should consult the documentation for more information on the properties of the calendar Web control. At this point, we have created a calendar control, set some properties, and specified an event handler for the OnSelectionChanged and OnDayRender events. <%@ Page Language="vb" %> <script runat="server"> Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs) 'TODO: Add code to emit client-side JavaScript to auto-populate ' the date text field in the form End Sub
Private Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs) 'TODO: Add code to render the selected day End Sub </script><form runat="server"> <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_dayrender" ShowTitle="true" DayNameFormat="FirstTwoLetters" SelectionMode="Day" BackColor="#ffffff" FirstDayOfWeek="Monday" BorderColor="#000000" ForeColor="#00000" Height="60" Width="120"> <TitleStyle backcolor="#000080" forecolor="#ffffff" /> <NextPrevStyle backcolor="#000080" forecolor="#ffffff" /> <OtherMonthDayStyle forecolor="#c0c0c0" /> </asp:Calendar> <asp:Literal id="Literal1" runat="server"></asp:Literal> </form> Note that we still need to add code for our Calendar1_SelectionChanged event handler and Calendar1_DayRender method. Let's first look at the Calendar1_DayRender method. We simply want to use this method to highlight the current date when the user loads the calendar. To accomplish this, we simply need to add these three lines of code: Private Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs) If e.Day.Date = DateTime.Now.ToString("d") Then e.Cell.BackColor = System.Drawing.Color.LightGray End If End Sub Notice that we use the properties Day and Cell which are made available through the DayRenderEventArgs object. The Cell property represents the cell around the date and the day property is the date being rendered. Now all that remains is the Calendar1_SelectionChanged event handler, where we need to emit client-side JavaScript code to update the form and close the pop-up. While we could simply use Response.Write's, the output would appear before any other HTML content (including the <html> tag). So, to make our HTML "correct," we'll use a literal control inbetween the <head> ... </head> tags. Creating this literal control is easy enough: <head> <asp:Literal id="Literal1" runat="server"></asp:Literal> </head> We will use this literal control to hold our JavaScript after we create it. Now lets look at creating the JavaScript to pass the value back to the form. The first thing we will do is create a string, strJScript, to hold our JavaScript code. Next, we will build up this string so that it's end contents set the form's text box's value to the selected date and the window is closed. This is accomplished with the following code in the Calendar1_SelectionChanged event handler. Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs) Dim strjscript as string = "<script language=""javascript"">" strjscript &= "window.opener." & _ Httpcontext.Current.Request.Querystring("formname") & ".value = '" & _ Calendar1.SelectedDate & "';window.close();" strjscript = strjscript & "</script" & ">" 'Don't Ask, Tool Bug
Literal1.Text = strjscript 'Set the literal control's text to the JScript code End Sub Here we round out the event handler by setting the text of our literal to the dynamically generated client-side JavaScript code. This has the effect of executing this client-side JavaScript code when the page is rendered. So when a user selects a date this event will fire and the JavaScript will be created. As the page is rendered the JavaScript will be run, the value of the selected date transferred to the form's text box, and the calendar page closed. Neat! Happy Programming! By James Avery
页面上放calendar控件
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. 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: 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! In Part 1 we looked at how to create a general calendar control and explained the aim of this article: to create a calendar pop-up to facilitate selecting a date for a form field text box. In this part we'll complete the application by examining how to "beautify" our calendar control and add the essential functionality. Making the Calendar Control Pretty!
Since by default there is no selected date on the calendar we are going to capture the OnDayRender event so we can change the background color of the current date to a different color. We could also change the font size, or make the date bold if we wanted to. We can easily accomplish this by adding an event handler to our control like so: <asp:Calendar id="id" runat="server"
OnSelectionChanged="eventHandler"
OnDayRender="methodName" />
Here the EventHandler is the name of the evant handler that you must provide to handle the OnDayRender event. Note that for my application I created a function named Caledar1_dayrender to override handle this event. There are a few more properties we may wish to set to make the calendar control more useful. One important one is to set the SelectionMode to Day, which limits the user to selecting a single day as opposed to a range of dates. There are a number of UI/stylistic properties you may wish to set as well, such as BorderColor, BackColor, DayNameFormat, TitleStyle, etc. You should consult the documentation for more information on the properties of the calendar Web control. At this point, we have created a calendar control, set some properties, and specified an event handler for the OnSelectionChanged and OnDayRender events. <%@ Page Language="vb" %>
<script runat="server">
Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs)
'TODO: Add code to emit client-side JavaScript to auto-populate
' the date text field in the form
End Sub
Private Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs)
'TODO: Add code to render the selected day
End Sub
</script><form runat="server">
<asp:Calendar id="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"
OnDayRender="Calendar1_dayrender"
ShowTitle="true" DayNameFormat="FirstTwoLetters"
SelectionMode="Day" BackColor="#ffffff"
FirstDayOfWeek="Monday" BorderColor="#000000"
ForeColor="#00000" Height="60" Width="120">
<TitleStyle backcolor="#000080" forecolor="#ffffff" />
<NextPrevStyle backcolor="#000080" forecolor="#ffffff" />
<OtherMonthDayStyle forecolor="#c0c0c0" />
</asp:Calendar>
<asp:Literal id="Literal1" runat="server"></asp:Literal>
</form>
Note that we still need to add code for our Calendar1_SelectionChanged event handler and Calendar1_DayRender method. Let's first look at the Calendar1_DayRender method. We simply want to use this method to highlight the current date when the user loads the calendar. To accomplish this, we simply need to add these three lines of code: Private Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs)
If e.Day.Date = DateTime.Now.ToString("d") Then
e.Cell.BackColor = System.Drawing.Color.LightGray
End If
End Sub
Notice that we use the properties Day and Cell which are made available through the DayRenderEventArgs object. The Cell property represents the cell around the date and the day property is the date being rendered. Now all that remains is the Calendar1_SelectionChanged event handler, where we need to emit client-side JavaScript code to update the form and close the pop-up. While we could simply use Response.Write's, the output would appear before any other HTML content (including the <html> tag). So, to make our HTML "correct," we'll use a literal control inbetween the <head> ... </head> tags. Creating this literal control is easy enough: <head>
<asp:Literal id="Literal1" runat="server"></asp:Literal>
</head>
We will use this literal control to hold our JavaScript after we create it. Now lets look at creating the JavaScript to pass the value back to the form. The first thing we will do is create a string, strJScript, to hold our JavaScript code. Next, we will build up this string so that it's end contents set the form's text box's value to the selected date and the window is closed. This is accomplished with the following code in the Calendar1_SelectionChanged event handler. Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs)
Dim strjscript as string = "<script language=""javascript"">"
strjscript &= "window.opener." & _
Httpcontext.Current.Request.Querystring("formname") & ".value = '" & _
Calendar1.SelectedDate & "';window.close();"
strjscript = strjscript & "</script" & ">" 'Don't Ask, Tool Bug
Literal1.Text = strjscript 'Set the literal control's text to the JScript code
End Sub
Here we round out the event handler by setting the text of our literal to the dynamically generated client-side JavaScript code. This has the effect of executing this client-side JavaScript code when the page is rendered. So when a user selects a date this event will fire and the JavaScript will be created. As the page is rendered the JavaScript will be run, the value of the selected date transferred to the form's text box, and the calendar page closed. Neat! Happy Programming!
By James Avery
--------------------------------------------------------------------------------------------------------------------------------
源碼：
<%@ Page Language="vb" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>Choose a Date</title>
</head>
<body leftmargin="0" topmargin="0">
<form runat="server">
<asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_dayrender" showtitle="true" DayNameFormat="FirstTwoLetters" SelectionMode="Day" BackColor="#ffffff" FirstDayOfWeek="Monday" BorderColor="#000000" ForeColor="#00000" Height="60" Width="120">
<TitleStyle backcolor="#000080" forecolor="#ffffff" />
<NextPrevStyle backcolor="#000080" forecolor="#ffffff" />
<OtherMonthDayStyle forecolor="#c0c0c0" />
</asp:Calendar>
<asp:Literal id="Literal1" runat="server"></asp:Literal>
</form>
</body>
</html>