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:

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:

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":

Months View

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

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:

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:

• WebForms: https://demos.devexpress.com/ASPxEditorsDemos/DateTime/MonthYearPicker.aspx
• MVC: https://demos.devexpress.com/MVCxDataEditorsDemos/Editors/MonthYearPicker

GitHub Sample

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

• WebForms: https://github.com/DevExpress-Examples/how-to-use-ASPxDateEdit-in-month-year-picker-mode-to-filter-ASPxGridView
• MVC: https://github.com/DevExpress-Examples/how-to-use-DateEdit-in-month-year-picker-mode-to-filter-GridView

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