Powered by Blogger.

Friday, February 14, 2014

Ajaxcontroltoolkit Calendarextender Example

In this post we will discuss about ajaxcontroltoolkit calendarextender control. Also you can check out my previous posts on:

- Show ModalPopupExtender in code behind in Ajax in Asp.Net

- Data access block of Microsoft enterprise library 6.0 using stored procedure

- What are different types of results in MVC?

Here in this example, when a user click on the calendar icon, the calender will pop up and when user select a date, then the date will be populated in the textbox.

First drag and drop a calander extender control to the page from the toolkit. You can check out this article if you want to know how to add ajaxextender controls to the toolbax. The code will look like below:

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" PopupPosition="Right" PopupButtonID="image" TargetControlID="txtDate" Format="MM/dd/yyyy"></ajaxToolkit:CalendarExtender>

Here are some properties of the control:
PopupPosition: You can set the position where the calender will popup.

PopupButtonID: ID of the button on which click you want the calendar to open. 

TargetControlID: This is the target control id where the selected date will appear.

Format: This is the date format you want the date to appear.

Below is the full code:

<ajaxtoolkit:toolkitscriptmanager id="ToolkitScriptManager1" runat="server"></ajaxtoolkit:toolkitscriptmanager>
        <asp:TextBox ID="txtDate" runat="server" Style="width: 198px"></asp:TextBox>
        <asp:Image ID="image" runat="Server" ImageUrl="~/icon-calendar.gif" />
        <ajaxtoolkit:calendarextender id="CalendarExtender1" runat="server" popupposition="Right"
            popupbuttonid="image" targetcontrolid="txtDate" format="MM/dd/yyyy"></ajaxtoolkit:calendarextender>

It will appear like below: