In this article I will explain with example how to implement ASP.Net AJAX Control Toolkit CalendarExtender control with ImageButton in ASP.Net and how to set specific Date Format such as dd/MM/yyyy for the ASP.Net AJAX Control Toolkit CalendarExtender control.
When the ImageButton is clicked it will open the ASP.Net AJAX Control Toolkit CalendarExtender Calendar Popup.
You might also like read:
 
HTML Markup
First we need to register the AJAX Control Toolkit on the page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
Below is the HTML Markup which consists of a TextBox, an ImageButton and an ASP.Net AJAX CalendarExtender control.
<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>
 
Showing ASP.Net AJAX CalendarExtender Popup on click of ImageButton
This is very simple, you just need to add an ImageButton set the ImageUrl to some image of Calendar or Date Picker and set the ID of the ImageButton to the PopupButtonID property of the ASP.Net AJAX Control Toolkit CalendarExtender control.
 
Set dd/MM/yyyy Date format for ASP.Net AJAX CalendarExtender Popup
If you want to set any specific Date Format form example dd/MM/yyyy then simply set the required date format in the Format property of the ASP.Net AJAX CalendarExtender control.
ASP.Net AJAX CalendarExtender with ImageButton Example | ASP.Net AJAX CalendarExtender dd/MM/yyyy Date Format Example
 
Demo
View Demo
 
Downloads