Telerik blogs
Hi all,

My name is Radoslav Kirilov and I am developer at one of Telerik's ASP.NET teams.

I want to introduce you the new RadMonthYearPicker control which is available in the new Q1 2011 release of RadControls for ASP.NET AJAX. RadMonthYearPicker is a flexible component that allows the user to select month and year and to display that month/year in the specified format and culture.

RadMonthYearPicker first look

RadMonthYearPicker is a part of the RadCalendar suite and it has most of the properties introduced into the RadDatePicker. Below are listed the most important of them:
  • MinDate, MaxDate - the control will not accept dates beyond the specified range.
  • DisplayDateFormat - Customize the display month/year format for the input.
  • EnableShadows - The MonthYearView component will appear with shadow effect or not.
  • ShowPopupOnFocus - The textbox can be focused with the mouse or the keyboard.
  • EnableScreenBoundaryDetection - The control's popup can appear on various sides, regardless of the PopupDirection property value, so that the popup is not displayed beyond the page edge.
  • MonthStyle - Gets the style properties for the month in the displayed view.
  • YearStyle - Gets the style properties for the years in the displayed view.

The RadMonthYearPicker can be used as a picker control into bound controls. Binding a RadMonthYearPicker to a data source is easily provided through the DbSelectedDate property. It works almost like the SelectedDate one, but will not throw an exception when it is given a null value:

...
<edititemtemplate>
<
telerik:RadMonthYearPicker ID=" RadMonthYearPicker1" MinDate="01/2010"
runat="server" DbSelectedDate='<%# Bind("Dates") %>'>
</
telerik:RadMonthYearPicker>
</
edititemtemplate>
...

The main difference between FastNavigation view of the RadCalendar and RadMonthYearPicker's view is that the RadMonthYearPicker's view has four types of custom cells which appearance could be controlled on the server. The most appropriate event for changing their styles is ViewCellCreated. The cells types are declared into the MonthYearViewCellType enum and they are - MonthCell, YearCell, NavigationCell, ButtonCell

RadMonthYearPicker cell types

Example of handling the ViewCellCreated event and changing the style of the different cells' types could be found in this link. Like the RadDatePicker control the RadMonthYearPicker has rich client side api which allows you to control its behavior. You could manipulate its min/max date, selected date, focused date, month year view popup direction, control visibility and etc. In addition the control introduces two new client side events:
  • OnMonthSelected - Occurs when the user selects month cell.
  • OnYearSelected - Occurs when the user selects year cell.
On the following link you could find an example which demonstrates most of the client side features of the RadMonthYearPicker control.

In addition the RadMonthYearPicker for ASP.NET AJAX is level A accessible (in compliance with the W3C Web Accessibility Guidelines 2.0). You could find an online example which shows the RadMonthYearPicker accessibility here.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.