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


Leave Comment