ASP.Net AJAX CalendarExtender Control to Create DatePicker in C# VB.Net

In earlier day’s we have used third party Javascript Datepicker for our web application. But now VS provides us a set of AJAX control’s named AJAX Control ToolKit. One of the most useful control is CalendarExtender Control. By using this AJAX CalendarExtender Control we can build easily a Datepicker control for our web applications. Here in this article I will explain “How we can create Datepicker Control using AJAX CalendarExtender Control“. From this article you also learn “How to use AJAX CalendarExtender in Asp.Net“.

ASP.Net AJAX CalendarExtender Control to Create DatePicker in Csharp VB.Net

Step by Step Using AJAX CalendarExtender Control as a Datepicker:
Step 1: Add ToolkitScriptManager.
Step 2: Add a TextBox and ImageButton like below:

    <b>Select Date:</b><br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:ImageButton ID="imgDate" runat="server" ImageUrl="~/Images/Calendar_Icon.png" ImageAlign="Baseline" Height="16px" />

Step 3: Add AJAX CalendarExtender Control like below:

    <asp:CalendarExtender ID="Datepicker_1" runat="server" Enabled="True" 
    TargetControlID="TextBox1" Format="dd MMM, yyyy" PopupButtonID="imgDate">

Note: TargetControlID defines the TextBox Control which is used to display the date. Format defines how we want to format the date. You can use more Date format like yyyy/MM/dd, dd/MM/yyyy, [dd MMM, yyyy] or any combination as you like. PopupButtonID defines the control on which click event the AJAX CalendarExtender will pop’s up.

Step 4: Runt the project.

Hope now you can understand the usage of AJAX CalendarExtender to build a Datepicker in your Asp.Net website.

Download Code Example C#        Download Code Example VB.Net

One thought on “ASP.Net AJAX CalendarExtender Control to Create DatePicker in C# VB.Net

  • May 16, 2015 at 8:08 am

    Excellent Code Specially when Master page Includes.


Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code