A Day in the Life of a Developer
LANGUAGES: VB .NET | JavaScript
TECHNOLOGIES: ASP.NET Calendar Control | DHTML
Build a Date Picker
Learn to use the Calendar control without complex HTML and postback structures.
By Doug Seven
Microsoft ASP.NET MVP
One of the things ASP.NET does well is provide server controls for common tasks. Server controls, like the Calendar control, enable rapid application development by eliminating the need to build the complex HTML and postback structure for rendering a Web-based calendar. This week I was asked to create a date picker for Internet Explorer 5.0+ using the ASP.NET Calendar control, JavaScript, and DHTML. Here's how I did it.
The Parent Window
In a Web form, I display a TextBox that holds a date and a hyperlink that links to the DatePicker Web form. This Web form is shown in Figure 1.
Figure 1. The parent Web form has a
TextBox that holds a date and a link to the DatePicker Web form.
The Date Picker link actually fires a JavaScript function named pickDate(Src), which takes the name of the related TextBox. The pickDate function uses the window.open method to open the DatePicker Web form in a new window (see Figure 2).
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb"
Inherits="September2k2b.WebForm1"%>
content="Microsoft Visual Studio.NET 7.0">
content="JavaScript">
content="http://schemas.microsoft.com/intellisense/ie5">
Figure 2. When you click on the Date Picker link, the pickDate() function is invoked and a new browser window opens.
The DatePicker Web Form
The new browser window that opens when the pickDate function is invoked (the DatePicker.aspx Web form) contains a Calendar control and a LinkButton control (see Figure 3).
Figure 3. This window incorporates
both the Calendar control and the LinkButton control, letting the user view
calendar months and select a date before closing the window.
I created an event handler for LinkButton that retrieves the SelectedDate property of the Calendar control and passes it back to the TextBox control in the parent Web form. I did this using the window.opener property, which refers to the window that opens the current window. This gives me full access to the DHTML DOM of the parent window.
In the LinkButton event handler, shown in Figure 4, I create a two-line JavaScript block that gets added dynamically to the bottom of the DatePicker Web form. Because the script is not encapsulated in a function, it is executed as soon as the browser parses it. When the script is parsed, the window.opener property is used to pass the Calendar.SelectedDate property to the parent form's TextBox control. The second line of the script closes the DatePicker Web form.
Private Sub LinkButton1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles LinkButton1.Click
Dim script As New System.Text.StringBuilder()
script.Append("") 'Closing script tag
'Add the script to the page
Me.Page.Controls.Add(New LiteralControl(script.ToString()))
End Sub
Figure 4. The LinkButton event handler creates JavaScript code at the bottom of the DatePicker Web form. The script is parsed as soon as the window opens, passing the Calendar.SelectedDate property to the parent form's TextBox control.
Because this sample makes use of DHTML and JavaScript, it is not suitable for all browsers. But it is compatible with Internet Explorer 5.0+ and any other browser that supports the window.opener property.
The code for the date picker is available for download.
As one of the co-founders of DotNetJunkies (http://www.dotnetjunkies.com), a content-based online training resource for .NET developers, Doug Seven has been building applications with the .NET Framework since summer 2000. Seven has co-authored five books related to the .NET Framework, including Programming Data-Driven Web Applications with ASP.NET and ASP.NET: Tips, Tutorials & Code (Sams), and he has worked with C#, Visual Basic .NET, Web applications, mobile device applications, XML Web Services, Windows Form development, and console and service applications. E-mail Doug at mailto:[email protected].
