Displaying a Simple Popup Calendar

Modified on 2010/05/23 19:08 by Stephen Walther — Categorized as: Uncategorized

In this tutorial, you learn how to display a popup calendar when someone moves focus to a TextBox. You can use the calendar to select a particular date.

We'll create the popup calendar by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an CalendarExtender

To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.

Add a ToolkitScriptManager

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

Add a TextBox Control

The CalendarExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.

Next, change the ID of the TextBox control to txtStartDate. You can change the ID in the Properties window. The resulting source code looks like this:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>

Add a CalendarExtender

The next step is to apply a CalendarExtender control to the TextBox. Add the following CalendarExtender control to your page:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>

<asp:CalendarExtender 
    ID="CalendarExtender1" 
    TargetControlID="txtStartDate" 
    runat="server" />

The following TextBox illustrates how the CalendarExtender works. Click or tab into the TextBox and the popup calendar will appear: