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.
For more information, please see the original article on my website (written by me)
here.