How to use ASP.NET AJAX Calender Extender

Introduction

This is an easy way to link ASP.NET AJAX calender with a textbox so that selecting date from calender is captured by the textbox.

Background

There are many useful controls in ASP.NET AJAX toolkit - AJAX Calender Extender is one of them.

Using the Code

Today, I am going to demonstrate an easy way to link ASP.NET AJAX Calender Extender with a textbox so that selecting date from calender is captured by the textbox.

Important (Point to remember): Make sure you have AjaxControlToolkit.dll in your bin folder.

Add ASP.NET textbox from toolbar on your page:

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

Now add ASP.NET image tag from toolbar on your page:

<asp:Image ID="Image1" runat="server" ImageUrl="Calendar_icon.png" />

This image tag will display a small icon of calender so that the user can click on the calender icon to open up the calender tool.

Now add AJAX CalendarExtender tag on your page like this:

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" 
    runat="server" TargetControlID="DateTextBox" 
    PopupButtonID="Image1">
</ajaxToolkit:CalendarExtender>

The AJAX CalendarExtender makes a connection with the textbox and image tag.

Your code should look like this:

<asp:TextBox ID="DateTextBox" runat="server"  />
<asp:Image ID="Image1" runat="server" ImageUrl="Calendar_scheduleHS.png" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" 
    TargetControlID="DateTextBox" PopupButtonID="Image1">
</ajaxToolkit:CalendarExtender>

Make sure you add this in your webconfig:

<pages>
      <controls>
       
 <add tagPrefix="asp" namespace="System.Web.UI" 
assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35"/>
        <add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" 
            tagPrefix="ajaxToolkit"/>
      </controls>
    </pages>

That's all you need in order to make ASP.NET AJAX Calender tool work with your textbox.