• How to use AJAX Popup Calendar as DatePicker in ASP.NET

    by  • May 18, 2013 • Microsoft .NET AJAX, Microsoft ASP.NET, Microsoft Visual Studio .NET • 0 Comments

    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

    1. Right click on Toolbox and select Add Tab, Rename the tab AjaxControlToolkit
    2. Right click in the newly created tab and select Choose Items
    3. Browse the folder where you extracted AjaxControlToolkit and select AjaxControlToolkit.dll file.
    4. Press Ok to add AjaxControlToolkit

    Now don’t forget to add following “Register” after “Page” tag at the top of the aspx page

    Here is the code

    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.




    Namecheap.com
    Avatar of GetCodeSnippet.com

    About

    GetCodeSnippet.com provides you high quality Microsoft .NET development related articles, tutorials and sample code for ASP.NET, C#, VB.NET, AJAX, WCF, WPF, Web Services, Windows Services, SQL Server and other technologies.

    Leave a Reply