Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / programming

How to use ASP.NET AJAX Calender Extender

5.00/5 (4 votes)
20 Jun 2012CPOL1 min read 173.2K  
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.NET
<asp:TextBox ID="DateTextBox" runat="server"  />

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

ASP.NET
<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:

ASP.NET
<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.NET
<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:

XML
<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.

For more information, please see the original article on my website (written by me) here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)