In this article I will explain what is
Ajax CalendarExtender
with Example, Change date format and show calendar when click on button in
ASP.NET.
Ajax CalendarExtender:
Calendar is an ASP.NET AJAX extender that can be
attached to any ASP.NET TextBox control. It provides client-side date-picking
functionality with customizable date format and UI in a popup control. You can
interact with the calendar by clicking on a day to set the date, or the
"Today" link to set the current date.
Syntax:
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM
d, yyyy"
/>
Example:
<asp:TextBox runat="server" ID="txtInvoiceDate"></asp:TextBox>
<Ajax:CalendarExtender ID="CalendarExtender2" runat="server" Enabled="true" Format="dd/MM/yyyy"
TargetControlID="txtInvoiceDate">
Properties:
- TargetControlID
- The ID of the TextBox to extend with the calendar.
- CssClass
- Name of the CSS class used to style the calendar. See the Calendar
Theming section for more information.
- Format
- Format string used
to display the selected date.
- PopupButtonID
- The ID of a control to show the calendar popup when clicked. If this
value is not set, the calendar will pop up when the textbox receives
focus.
- PopupPosition
- Indicates where the calendar popup should appear at the
BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the
TextBox.
- SelectedDate
- Indicates the date the Calendar extender is initialized with.
- StartDate
- Indicates start date for range that available for selection.
- EndDate
- Indicates end date for range that available for selection.
Example:
Below is the Sample aspx page design.
<%@ 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="txtSelectDate"
runat="server"
/>
<ajax:CalendarExtender ID="CalendarExtender1"
TargetControlID="txtSelectDate"
Format="dd/MM/yyyy"
runat="server">
</ajax:CalendarExtender>
</td>
</tr>
<tr>
<td><b>Select
Date in Button</b></td>
<td>
<asp:TextBox ID="txtButtonDate1"
runat="server"/>
<asp:ImageButton ID="imgbtnCalendar"
runat="server"
ImageUrl="~/Calendar.png"
/>
<ajax:CalendarExtender ID="CalendarExtender2"
TargetControlID="txtButtonDate1"
PopupButtonID="imgbtnCalendar"
runat="server"
/>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment