Create a Popup Calendar for ASP.NET Web Forms

Create a Popup Calendar for ASP.NET Web Forms...

Use the .NET Calendar Control and a little javascript to create a handy popup calendar for your web forms.

By: John Kilgo

Date: July 7, 2003

Download the code.

Over the years most of us have seen popup calendars to aid in filling in date fields on web forms. In the past most of these were done with pure javascript and could get pretty messy to code and maintain. With .NET we now have the Calendar control at our disposal. We still need a way to pop it up on our forms and javascript still comes in handy for that, but a lot less of it. I've seen several ways of doing it, most of them more complicated than I think they need to be. I like the minimal code required in the approach demonstrated in this article. I came across the basics of it in a Macromedia Devnet article. I've added a feature or two and present runnable and downloadable code for it in this article.

We have three code pages to look at. The first is a test page with a web form containing a couple of text boxes so that we can test out the calendar popup code that follows in the next two code pages. You of course would use your own form instead of my test page. The test page does contain a little javascript which you would have to include on your own form. Lets take a look at the test page below.

The thing to notice is that immediately following each TextBox there is an HREF containing some javascript code. This code (which your browser may wrap, but which is not wrapped in reality) is what opens a new 'popup' window containing the calendar from which we can choose a date which will be written back to the textbox. I have also included a small calendar image to click to bring up the popup calendar. The javascript code for the two textboxes is identical with one exception. On the querystring we passing the name (id) of the textbox. The first one reads "txtStartDate", while the second one reads "txtEndDate". You would set that name to whatever your id is for your date textbox on your form. Also notice that we are specifying width, height, left, and top. These apply to the popup window containing the calendar control. Width and height allow you to control the exact size of the popup window. Left and top allow you to control screen positioning so that you can have the calendar pop up near, but not covering up your textbox. Play with these settings to see what I mean. The rest of the page is just normal ASP.NET forms stuff.

<%@ Page Language="vb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>GetDates</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table>
  <tr>
    <td align="right">
      Start Date:
    </td>
    <td align="left">
      <asp:TextBox ID="txtStartDate" Runat="server" />
    </td>
    <td align="center">
      <a href="javascript:;" onclick="window.open('popup.aspx?textbox=txtStartDate','cal','width=250,height=225,left=270,top=180')">
      <img src="images/SmallCalendar.gif" border="0"></a>
    </td>
  </tr>
  <tr>
    <td align="right">
      End Date:
    </td>
    <td align="left">
      <asp:TextBox ID="txtEndDate" Runat="server" />
    </td>
    <td align="center">
      <a href="javascript:;" onclick="window.open('popup.aspx?textbox=txtEndDate','cal','width=250,height=225,left=270,top=180')">
      <img src="images/SmallCalendar.gif" border="0"></a>
    </td>
  </tr>
</table>
</form>
</body>
</html>

Now we come to PopUp.aspx, and later PopUp.aspx.vb, the files that actually make all this work. PopUp.aspx is the window that our test program, or your form, actually pops up on the screen. As you can see below, we have a form, containing a calendar control. I didn't do anything to make the calendar look pretty - you can set its properties to make it look a lot nicer if you want to. Notice that we set up for an OnSelectionChanged event called Change_Date. In the codebehind file that is where we will return the selected date to our test page (your form) and automatically close the popup window. Also notice that we have included a hidden html control on our form. That is what will contain the name (id) of the textbox on the test page (your form) so that we know what control to pass the selected date back to on the calling form. Notice that we added 'Runat="server"' to a standard html control! To do that we must import System.Web.UI.HtmlControls.HtmlGenericControl on our codebehind page.

<%@ Page Language="vb" AutoEventWireup="false" Src="PopUp.aspx.vb" Inherits="PopUp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>PopUp</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Calendar ID="calDate" OnSelectionChanged="Change_Date" Runat="server" />
<input type="hidden" id="control" runat="server" />
</form>
</body>
</html>

And finally we look at PopUp.aspx.vb. "control" is our hidden control. Notice that in the Page_Load we grab the id of the textbox our date goes in from the querystring passed in by the javascript HREF on the calling form. In Sub Change_Date we write some more javascript. What this is doing is setting the value of the textbox control, whose id was passed in on the querystring, to the date that was selected in the calendar control. The next to last line then closes the popup window. The RegisterClientScriptBlock method gets our script written to the page. It requires two arguments: a unique string key, and the script, or a variable containing the script.

Imports System.Web.UI.HtmlControls.HtmlGenericControl

Public Class PopUp
  Inherits System.Web.UI.Page

  Protected WithEvents control As System.Web.UI.HtmlControls.HtmlInputHidden
  Protected WithEvents calDate As System.Web.UI.WebControls.Calendar

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    control.Value = Request.QueryString("textbox").ToString()
  End Sub

  Protected Sub Change_Date(sender As System.Object, e As System.EventArgs)
    Dim strScript As String = "<script>window.opener.document.forms(0)." + control.Value + ".value = '"
                 strScript += calDate.SelectedDate.ToString("MM/dd/yyyy")
                 strScript += "';self.close()"
                 strScript += "</" + "script>"
    RegisterClientScriptBlock("anything", strScript)
  End Sub

End Class

Well, I hope you can make use of this technique on your forms requiring dates. Once you have PopUp.aspx and PopUp.aspx.vb working to your satisfaction you never have to change them again. You can use them over and over again for many forms on many projects. All you will have to do is add the javascript HREF on your forms to call PopUp.aspx and play with the the left and top positioning to get the calendar to apperar where you want it each time. Best of luck.

You may run the test program here.
You may download the code here.