CalendarExtender Control In Ajax

The Calendar control enables you to display a date picker when focus is moved to an input element.
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.
CalendarExtender Properties:
1. TargetControlID :- The ID of the TextBox to extend with the calendar.
2. CssClass :- Name of the CSS class used to style the calendar. See the Calendar Theming section for more information.
3. Format :- Format string used to display the selected date.
4. 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.

5. PopupPosition :- Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.
6. SelectedDate: - Indicates the date the Calendar extender is initialized with.
7. StartDate: - Indicates start date for range that available for selection.
8. EndDate: - Indicates end date for range that available for selection.

Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarExtender.aspx.cs" Inherits="CalendarExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<form id="form1" runat="server">
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <h3>Using CalendarExtender</h3>
<br/>
<asp:TextBox runat="server" ID="txtDate1" />
<br />
 <asp:CalendarExtender ID="defaultCalendarExtender" runat="server" TargetControlID="txtDate1" />
</form>

Output:-









No comments:

Post a Comment