Version

Using WebMonthCalendar as WebDatePicker’s Drop-Down Calendar

WebDatePicker™ comes equipped with a standard drop-down calendar control to allow your end-user to pick dates when editing data. However, if you wanted to provide your end-users with a more robust, feature-rich drop-down calendar, WebDatePicker allows you to use WebMonthCalendar™ as its drop-down calendar. You can associate WebMonthCalendar to WebDatePicker in one of two ways:

  • Controls exist in same container — When both controls exist in the same container, you can set the WebDatePicker control’s DropDownCalendarID property to the WebMonthCalendar control’s ID property.

  • Controls exist in different containers If one control exists in a different container than the other control, you can set the WebDatePicker control’s DropDownCalendarID property to the WebMonthCalendar control’s ClientID property instead so that WebDatePicker can find the correct instance of WebMonthCalendar. In this case, you should also ensure the following style attributes for the WebMonthCalendar:

display:none;

visibility:hidden;

Note
Note:

It is not recommended to set the DropDownCalendarID property after the Page_Load event.

To set WebMonthCalendar as the WebDatePicker control’s drop-down calendar

  1. From the Microsoft® Visual Studio® Toolbox, drag and drop a ScriptManager component, a WebDatePicker control and a WebMonthCalendar control onto the form.

  2. Customize the WebMonthCalendar depending on your requirements. For this example, enable the week numbers for WebMonthCalendar.

In Visual Basic:

WebMonthCalendar1.EnableWeekNumbers = true

In C#:

WebMonthCalendar1.EnableWeekNumbers = true;

  1. Set the WebDatePicker control’s DropDownCalendarID property to the WebMonthCalendar control’s Id property either through the Microsoft® Visual Studio® Property Window, or by using the following code:

In Visual Basic:

WebDatePicker1.DropDownCalendarID = WebMonthCalendar1.ID

In C#:

WebDatePicker1.DropDownCalendarID = WebMonthCalendar1.ID;

  1. Run the application and you will observe the WebMonthCalendar as the WebDatePicker control’s drop-down calendar.

WebDatePicker Using WebMonthCalendar as WebDatePicker's Drop Down Calendar 01.png