ASP.NET and MVC DateEdit & Calendar - Month-Year Picker

ASP.NET Team Blog
12 November 2018

Great news - our upcoming release will include a highly requested feature for both our ASP.NET DateEdit and Calendar Controls: a new mode that allow your end-users to select only the month and year portion of the date. Check this animation to see it in action:

DevExpress ASP.NET Calendar - Month-Year


There are many scenarios like "credit card expiration dates" that require an end-user to select only the month and year. The new month-year picker mode helps with these types of scenarios.

You can also use it to filter other controls like the GridView:

DevExpress ASP.NET Calendar - Month-Year - Filter

How to Use

To set up picker mode, use the new PickerType property. This property allows you to set one of these values: ['NotSet','Days','Months','Years','Decades'] (NotSet is the default value.)

Data Annotation Support

You can also set the PickerType property using Data Annotation attributes. Usually Data Annotation attributes are available with our ASP.NET MVC controls but now you can use them with the DevExpress ASP.NET WebForms Editor controls inside the DevExpress ASP.NET FormLayout control too:

public DateTime FilterDate { get; set; }

Let's take a look at the different PickerType values:

Days View

If PickerType is set to Days then the control will display the "Days" view and you can select a specific day, for example "11/22/2018":

DevExpress ASP.NET Calendar - Month-Year - Days View

Months View

With the Months setting, you can restrict the control to select months only:

DevExpress ASP.NET Calendar - Month-Year - Months View

The Months is the minimal available view. This means that an end-user can select only the specific month, for example, "Dec 2018". You cannot select the day in this view, however, because this control will bind to a variable of the DateTime type, it will set the day value to 1, the first day of the month.

Years View

The Years value let's you restrict the date selection to years only:

DevExpress ASP.NET Calendar - Month-Year - Years View

Initial & Max View

We've also added two new properties that let you set the initial and maximum view of navigation between months, years, and decades:

  • ASPxDateEdit.CalendarProperties.FastNavProperties.InitialView
  • ASPxDateEdit.CalendarProperties.FastNavProperties.MaxView


Take a look at the online demos:

GitHub Sample

A full working ASP.NET sample app of this feature is available here:

I'd like to thank all the customers who provided us their usage scenarios for the new feature. What are your thoughts on the new month-year picker feature? Drop me a line below, thanks!

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.