show-notice
hide-notice

Tuesday, 25 June 2013

Ajax CalendarExtender Example In Asp.Net -Change date format and show calendar when click on button


Introduction

In this article I will explain how to use Ajax Calendar extender control in asp.net and how to change date format in ajax calendar control and display calendar control when click on image button in asp.net. 



First create one new website and add AjaxControlToolkit reference to your application after that write following line in your aspx page


<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
Once we add above references design your aspx page will be likes this
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Calendar extendar control exmaple in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>
<table>
<tr>
<td><b>Select Date:</b></td>
<td>
<asp:TextBox ID="txtDate" runat="server" />
<ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDate" Format="dd/MM/yyyy" runat="server">
</ajax:CalendarExtender> 
</td>
</tr>
<tr>
<td><b>Select Date</b></td>
<td>
<asp:TextBox ID="txtDate1" runat="server"/> <asp:ImageButton ID="imgbtnCalendar" runat="server" ImageUrl="~/Calendar.png" />
<ajax:CalendarExtender ID="CalendarExtender2" TargetControlID="txtDate1" PopupButtonID="imgbtnCalendar" runat="server" />
</td>
</tr>
</table>
</form>
</body>
</html>
If you observe above code I define some of properties to ajax:CalendarExtender now I will explain all the properties of Ajax rating control
TargetControlID – The ID of control which is used to show calendar control when click on textbox or calendar image icon.
PopupButtonID – This property is used to set ID of control which is used to show calendar control when click on it.
PopupPosition – This property is used to indicate position of the calendar control when clicked on textbox.
SelectedDate – This property is used to set date of calendar control which is initially showed.

SHARE THIS POST   

0 comments :

Post a Comment

Design by Gohilinfotech | www.gohilinfotech.blogspot.com