Creating a popup calendar control

Creating a popup calendar control

Many data entry forms have one or more text fields that the user should fill with a date value. Many sites have a button near these fields that when clicked pops up a new small window with a calendar, to help the user select the date. When the user clicks on a day (rendered as a hyperlink), this popup calendar window is closed and the selected date is shown in the input textbox control of the parent window. This feature can be easily reproduced in ASP.NET by using the Calendar control and a bit of client-side javascript code.

First of all, let’s write the parent window’s ASPX code. All we need is the input TextBox server control and a HTML button:

As you see, when the button is pressed it calls a javascript procedure that expects in input the name of the textbox control that will be filled with the selected date, and the width and height of the popup calendar window that will be opened. Here’s the javascript code, defined within the page’s section:

The procedure above uses to open the popup window with the specified size, and with no scrollbar, menu, toolbar, status bar, and makes it not resizable. The first parameter is the Url of the page to load into the new window, and from the code above you see that it loads a DatePicker.aspx page with a Ctl parameter in the querystring, whose value is that passed in input to the PopupPicker procedure.

We’re done with the main page, now we have to write the DatePicker.aspx page, that renders the calendar. Let’s see the code first:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="DatePicker.aspx.vb" _    Inherits="FrameTest.DatePickerPage"%>      DatePicker             

In the section we just declare an instance of the server-side Calendar control. The interesting part is above, the client-side SetDate javascript procedure, that takes a string in input, and uses it as value for the parent form’s input control, whose name is passed on the querystring. Finally, it closes the popup form itself. The provided comments should make clear how the input control name is retrieved from the querystring.

What we want to do now is that this javascript procedure is called when the user clicks a day link in the calendar control. By default, all the links rendered by the Calendar server control generate a postback to the server. What we want, instead, is that they point to our custom SetDate procedure. Changing the default output for the table cells that contains the day links is pretty easy, thanks to the Calendar’s DayRender event, raised every time a day is being rendered, and that provides a reference to the table cell being created. What we do in the code below is replacing the default cell’s content with our own hyperlink control that has the same text but points to our own javascript:

Public Class DatePickerPage    Inherits System.Web.UI.Page    Protected WithEvents DatePicker As System.Web.UI.WebControls.Calendar    Private Sub DatePicker_DayRender(ByVal sender As Object, _        ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles _        DatePicker.DayRender        ' create a hyperlink control, and set its text to the cell's current         ' text        Dim hl As New HyperLink()        hl.Text = CType(e.Cell.Controls(0), LiteralControl).Text        ' set the navigation url (the href attribute) to the javascript         ' procedure        ' defined wihin the client-side 


©2023 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.