ajax calendar extender control in asp.net example

ajax calendar extender control in asp.net example 

In this topic we are going to see ajax calendar extender control in asp.net example .

Selecting a date is a common requirement of many applications. It is also one of the most common points in a form that can hinder form submission. End users are often slowed down by trying to figure out the format of the date that the form requires. The CalendarExtender control enables you to make it simple for your end users to select a date within a form. The CalendarExtender attaches to a textbox and pops up a calendar for selecting a date. By default, the calendar is shown when the textbox gets focus, but if you set the PopupButtonID to the ID of another control, the calendar becomes visible when that control is clicked.

The best way to set up fast date selection in a form is to provide a calendar that can be navigated and allow a date to quickly be selected, which will then be translated to a textual date format in the textbox. The CalendarExtender is very easy to use with just a few key properties. The TargetControlID points to the textbox that receives the selected date. The Format property specifies the string format for the date input of the textbox. The CalendarExtender control gives you all the client-side code required for this kind of action.

The follwoing example of providing a calendar control off your textbox controls.

output

When you run this page, the result is a single textbox on the page, appearing no different from any other textbox. However, when the end user clicks inside the textbox, a calendar appears directly below it, as shown in the output. Then, when the end user selects a date from the calendar, the date is placed as text within the textbox.

Some of the properties exposed from this control are FirstDayOfWeek and PopupPosition (which has the options BottomLeft, BottomRight, TopLeft, and TopRight). You can also change how the calendar is initiated on the client. Some sites offer a calendar button next to the textbox and only pop up the calendar option when the end user clicks the button. If this is something that you want to do on your pages, use the PopupButtonID property, which you must point to the ID of the image or button that you are using.