tag does not have the runat="server" attribute, the onClick event will fire on the client-side (in the browser), not on the server. As you can see, the link calls a JavaScript function called, calendarPicker. I prefer to call a function with the link, rather than writing the code in-line, as there may be more than one date field on a form. If we write the code in a function that uses a parameter to specify the reference to the field that we want to set, we can reuse the code for as many TextBox controls as we like on a single page. We can also debug JavaScript functions, but more on that, later.
I like to pass the calendarPicker function the name of the field that we want to edit in the format, "FormName.FieldName". You might have occasion to substitute your own form ID for VS .NET's standard "Form1", so I don't like to hard code this.
Here is the calendarPicker function:
<script language="javascript"
type="text/javascript">
///
<summary>
/// Launches the
DatePicker page in a popup window,
/// passing a
JavaScript reference to the field that we want to set.
///
</summary>
/// <param
name="strField">String. The JavaScript reference to the field that
we want to set,
/// in the format: FormName.FieldName
/// Please note
that JavaScript is case-sensitive.</param>
function
calendarPicker(strField)
{
window.open('DatePicker.aspx?field='
+ strField, 'calendarPopup', 'width=250,height=190,resizable=yes');
}
</script>
The calendarPicker function opens a page called DatePicker.aspx in new window. It passes the name of the field that we want the calendar to set in the QueryString. I like to use Visual Studio-style comments for my client-side scripts since it gets me in the habit of documenting my code.
Next, the DatePicker ASPX page:
The DatePicker page contains one standard ASP.NET Calendar control:
<%@ Page language="c#" Codebehind="DatePicker.aspx.cs"
AutoEventWireup="false" Inherits="CalendarPopup.DatePicker"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" >
<html>
<head>
<title>DatePicker</title>
<meta
name="GENERATOR" content="Microsoft Visual Studio .NET
7.1">
<meta
name="CODE_LANGUAGE" content="C#">
<meta
name="vs_defaultClientScript" content="JavaScript">
<meta
name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<style
type="text/css">
BODY
{ PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 4px;
PADDING-TOP: 0px }
BODY
{ FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
TABLE
{ FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
TR {
FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
TD {
FONT-SIZE: 9pt; FONT-FAMILY: Verdana, Geneva, Sans-Serif }
</style>
</head>
<body
onblur="this.window.focus();"
ms_positioning="FlowLayout">
<form
id="Form1" method="post" runat="server">
<div
align="center">
<asp:calendar
id="Calendar1" runat="server"
showgridlines="True" bordercolor="Black">
<todaydaystyle
forecolor="White" backcolor="#FFCC66"/>
<selectorstyle
backcolor="#FFCC66"/>
<nextprevstyle
font-size="9pt" forecolor="#FFFFCC"/>
<dayheaderstyle
height="1px" backcolor="#FFCC66"/>
<selecteddaystyle
font-bold="True" backcolor="#CCCCFF/>
<titlestyle
font-size="9pt" font-bold="True"
forecolor="#FFFFCC" backcolor="#990000"/>
<othermonthdaystyle
forecolor="#CC9966"/>
</asp:calendar>
</div>
</form>
</body>
</html>
The BODY tag contains a simple script that runs in the onBlur event (clientside) to turn the popup into a modal dialog box. Since we want the popup to be small, and its only purpose is to set a field value in the main page, there's no reason to let the user switch back to the other window.
The magic happens in a method that we attach to the Calendar's DayRender event:
/// <summary>
/// Replaces the standard post-back link for each calendar day
/// with the javascript to set the opener window's TextBox text.
/// Eliminates a needless round-trip to the server.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Calendar1_DayRender(object sender,
System.Web.UI.WebControls.DayRenderEventArgs e)
{
// Clear the
link from this day
e.Cell.Controls.Clear();
// Add the
custom link
System.Web.UI.HtmlControls.HtmlGenericControl
Link = new System.Web.UI.HtmlControls.HtmlGenericControl();
Link.TagName =
"a";
Link.InnerText =
e.Day.DayNumberText;
Link.Attributes.Add("href",
String.Format("JavaScript:window.opener.document.{0}.value = \'{1:d}\';
window.close();", Request.QueryString["field"], e.Day.Date));
// By default,
this will highlight today's date.
if(e.Day.IsSelected)
{
Link.Attributes.Add("style",
this.Calendar1.SelectedDayStyle.ToString());
}
// Now add our
custom link to the page
e.Cell.Controls.Add(Link);
}
This method will be called each time the Calendar control renders a day. The first thing that our method does is clear the contents of the table cell for the day that's being rendered. Next, we programmatically create a hyperlink (an <A> tag). We use the current day number from the Calendar as the InnerText for the link, just like the Calendar control would normally have done. We set the "HREF" property of the link by building a string that has the JavaScript needed to set the value of the TextBox control in the opener window, and then close the DatePicker window.
In the JavaScript, "opener" is a keyword that refers to the window that opened the current window via a window.open command. ASP.NET TextBox controls are renedered as <INPUT> tags in HTML. The script continues by setting the value of the particular field that we want to change, and in this case, we're specifying that the selected date be used (formatted with the ShortDatePattern) to set the value of the field.
In our Calendar1_DayRender method, we then check to see if the day that we're on represents today's date. Since we haven't specified the Calendar's SelectedDate property, it will select today's date by default. I like to give users a reference point, so I add a "style" attribute to our link and use the Calendar's SelectedDayStyle.
We wrap everything up by inserting our replacement hyperlink in the table cell for the day that we're on.
Things are going along fine, but we still haven't re-wired the Calendar control to call our custom method. To attach Calendar1_DayRender to the DayRender event for the Calendar, we can either edit DatePicker.aspx in Design mode in VisualStudio .NET or directly modify the page's InitializeComponent method in the code-behind file.
To avoid messing with the auto-generated code in the InitializeComponent method, we can add the EventHander by viewing the DatePicker page in Design mode. Click on the Calendar control and then click on the Events icon (the lightning bolt) in the Properties box. We should be able to select the method, Calendar1_DayRender, in the drop down menu next to the DayRender action.
VS .NET populates the available choices in the drop down menu by searching the code-behind file for any methods that match the ASP.NET Calendar control's DayRender event delegate signature. (The DayRenderEventHandler delegate takes two parameters; an object and a DayRenderEventArgs type.)
If we prefer to attach the custom delegate ourselves (or simply want to take a look at the changes made through the VS.net IDE), we can find the InitializeComponent method in the code-behind file in a region labeled "Web Form Designer generated code".
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Calendar1.DayRender += new
System.Web.UI.WebControls.DayRenderEventHandler(this.Calendar1_DayRender);
this.Load += new
System.EventHandler(this.Page_Load);
}
Notice that we're adding our DayRenderEventHandler, not replacing the Calendar control's built-in EventHandler. This is indicated by the += syntax. Let's let ASP.NET do the work of creating the HTML table for the calendar, and all of the days in the month. We're just going to substitute our own content for each day's table cell.
• Testing >>
