UPDATED:
Starting with version v2015 vol 2 (v15.2), this functionality is available out of the box. Simply set the MVCxGridViewColumn.SettingsHeaderFilter.Mode property to DateRangePicker to activate it. Please refer to the ASP.NET Grid View - Data Range Filter, Adaptivity and More (Coming soon in v15.2) blog post and the Date Range Header Filter demo for more information.
If you have version v15.2+ available, consider using the built-in functionality instead of the approach detailed below.
For Older Versions:
This example illustrates how to create a custom HeaderFilter for a date column. The main steps are:
1) create a custom HeaderTemplate using the SetHeaderTemplateContent method to prevent default header filter button logic and implement a custom one;
2) use the PopupControl to display a Calendar and several additional filters. FormLayout is used to build a layout;
3) use the client AutoFilterByColumn method to perform filtering from the client side and the MVCxClientGridView.PerformCallback method to pass a complex filter expression to the server to implement custom filtering;;
4) process a custom callback in the action method defined using the CustomActionRouteValues property and pass information about the current filter command to a partial view;
5) assign a delegate method to the BeforeGetCallbackResult property and implement the approach described in the ASPxGridView - How to programmatically change the column's filter in the FilterExpression help article to apply a new filter.
Click on the "Model Date" column to check how this works.
Web Forms:
T153163: OBSOLETE - ASPxGridView - How to implement a custom HeaderFilter with a calendar for a date column