How to use Ajax CalenderExtender in Asp.Net

In this Article we will Use Ajax Calendar Extender Control in our webpage to understand how to use Ajax calendar. Here We will Create Textbox and Calendar Control to Selected Date into Textbox. For Open Calendar Control I have Used Image Button.

Step 1: Design your Webpage like below.

    <div>

        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </cc1:ToolkitScriptManager>

        <asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>

        <asp:ImageButton ID="imgPopup" ImageUrl="images/calendar.png" ImageAlign="Bottom"

            runat="server" />

        <cc1:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtDate"

            Format="dd/MM/yyyy">

        </cc1:CalendarExtender>

    </div>

Step 2: Register AjaxControlToolKit in your Webpage.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Step 3: Calendar Control have TargetControlId and PopUpButtonId property to Change Value and to open Control in Webpage. In TargetControlId property use for Where you want to Paste value and PopUpButtonId Property use for from Which Control through you want to open.

Step 4: Now run your Web Application and Click on image button to Open Ajax Calendar Control and Select Date to Paste in your Textbox Control.

Author : Umesh Patel

Related Posts