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

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

Scenarios

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:

[DatePickerType(DatePickerType.Months)]
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

Demos

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!

7 comment(s)
Jose Isga

Excellent Date Control. Thank you for this new feature.

12 November, 2018
Ricardo Noronha

Excellent features, will help me in many implementations that I will.

12 November, 2018
Customer54178

what is the next release date?

14 November, 2018
Mehul Harry (DevExpress)

v18.2 is available now on https://devexpress.com/

14 November, 2018
Sven Glöckner 1

Great new features!

It would be also good to have a mode for "week view" to select Calendar weeks.

15 November, 2018
Mehul Harry (DevExpress)

@Sven,

Thanks for the suggestion, we'll consider it.

15 November, 2018
Mehul Harry (DevExpress)

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

github.com/.../how-to-use-ASPxDateEdit-in-month-year-picker-mode-to-filter-ASPxGridView

15 November, 2018

Please login or register to post comments.