How to use CalendarExtender with ASP.NET AJAX Control Toolkit

In this Tutorial we are using AJAX Control Toolkit to link CalendarExtender to a Textbox to pick a date and that date will captured by that Textbox. This Calender can be easily attached to any ASP.NET Textbox to select a particular date. 

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 : 

TargetControlID - The ID of the TextBox to extend with 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 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.

In Microsoft Visual Studio, Go-to File -> New -> Website

aspx page code

Click on Image to Enlarge

Design view of source code:                                            

View in Browser: