Popup calendar allows users to select date and enter in attached text box. So it simply works as datepicker and it is an elegant and easy way to enter date in text boxes. This article will explain how we can achieve this functionality using AJAX Popup Calendar in ASP.NET. In a previous article, I have explained how we can use Calendar Control in ASP.NET.
What is AJAX and what the functionality of AJAX is, is beyond the scope of this article. You just simply need to know that AJAX is web development technique that is used to create asynchronous web applications. AjaxControlToolkit is used to achieve AJAX functionality. AjaxControlToolkit is used to create an interactive and user friendly web experience. It contains more than 30 different controls that achieve different functionalities. Calendar Extender is part of the AjaxControlToolkit and we can easily use this as datepicker in our ASP.NET form with Text box. You can also download complete sample project.
If you’re interested to learn more advanced techniques about ASP.NET AJAX, you can buy Sams Teach Yourself ASP.NET Ajax in 24 Hours as well.
You need to download AjaxControlToolkit, extract the file and add it to your Visual studio Toolbox.
Follow these steps to add AjaxControlToolkit to your Visual Studio Toolbox
- Right click on Toolbox and select Add Tab, Rename the tab AjaxControlToolkit
- Right click in the newly created tab and select Choose Items
- Browse the folder where you extracted AjaxControlToolkit and select AjaxControlToolkit.dll file.
- Press Ok to add AjaxControlToolkit
Now don’t forget to add following “Register” after “Page” tag at the top of the aspx page
<%@ Register namespace="AjaxControlToolkit" tagprefix="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
Here is the code
<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:TextBox ID="txtSelectedDate" runat="server"></asp:TextBox>
<asp:ImageButton ID="imgCalendar" ImageUrl="~/Images/Calendar.jpg" Width="25" Height="25" runat="server" />
<AjaxControlToolkit:CalendarExtender ID="CalendarExtender" runat="server"
PopupButtonID="imgCalendar" TargetControlID="txtSelectedDate" />
You need to add a ScriptManager control first in your form to achieve AJAX functionality. Further I have added a Text Box and an Image button. Image Button will display an image which I have added in my project’s Image folder. Now we need to add a CalendarExtender from AjaxControlToolkit. We need to set its PopupButtonID attribute to ImageButton control and TragetControlID attribute to text box control. When we click on Image button, a popup calendar will appear and we can select our desire date and that date will be displayed in the text box.