Home > DeveloperSection > Articles > Ajax Toolkit CalendarExtender Control in ASP.Net

Ajax Toolkit CalendarExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 17947  View(s)
Rate this:

Ajax Toolkit CalendarExtender Control in ASP.Net

The AJAX Control Toolkit has a CalendarExtender control that pops up a calendar whenever the user clicks on the target control.

Calendar Properties:


·TargetControlID - The ID of the TextBox to extend with the calendar.

·CssClass - Name of the CSS class used to style the calendar

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.

SelectedDate - Indicates the date the Calendar extender is initialized with.


Code:

Write these codes on default.aspx page

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<%--Add the calender control here--%>

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" Animated="true">

</cc1:CalendarExtender>

<%--Add the two label, textbox(Apply the Calender extender on it) and button control here--%>

 

<asp:Label ID="Label1" runat="server" Text="Date"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<asp:Button ID="Button1" runat="server" Text="submit" onclick="Button1_Click" />

<br /><br />

<asp:Label ID="Label2" runat="server"></asp:Label>Write these code on button click event

protected void Button1_Click(object sender, EventArgs e)

    {

        Label2.Text = TextBox1.Text; // Show the date in label

    }


Run the project


AjaxControl Toolkit CalendarExtender Control in ASP.Net

When we click on textbox it populate the CalendarExtender control

AjaxControl Toolkit CalendarExtender Control in ASP.Net

Selecting any date from CalendarExtender control

AjaxControl Toolkit CalendarExtender Control in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick