View navigation in WinUI Calendar DateRange Picker

20 May 20213 minutes to read

You can easily navigate to the month, year, decade, or century views to select different date ranges in the dropdown calendar by clicking the header button. Initially, month view is loaded in the dropdown calendar.

Navigation between views in WinUI Calendar DateRange Picker

Restrict navigation between views

You can restrict navigation within a minimum and maximum views by using MinDisplayMode and MaxDisplayMode properties. This will be useful when your date range is smaller and you don’t want to show decade and century views.

By default, the value of MinDisplayMode property is Month and MaxDisplayMode property is Century.

<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                               MinDisplayMode="Month"
                               MaxDisplayMode="Year"
                               />
SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.MinDisplayMode = CalendarDisplayMode.Month;
sfCalendarDateRangePicker.MaxDisplayMode = CalendarDisplayMode.Year;

NOTE

When MinDisplayMode property value is Year and MinDate value is 15/01/2021, selecting the month of minimum date will set the starting date value from the minimum date i.e.. from January 15, 2021.

WinUI Calendar DateRange Picker Restrict View Navigation

NOTE

Download demo from Github

Selection based on view restriction

You can restrict users to select date range within specific views (example : choosing manufactured and expiry date of product) in Calendar DateRange Picker control using the MinDisplayMode and MaxDisplayMode properties.

<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                                    FormatString="{}{0:MM/yyyy} - {1:MM/yyyy}"
                                    MinDisplayMode="Year"
                                    MaxDisplayMode="Decade"
                               />
SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.MinDisplayMode = CalendarDisplayMode.Year;
sfCalendarDateRangePicker.MaxDisplayMode = CalendarDisplayMode.Decade;
sfCalendarDateRangePicker.FormatString = "{0:MM/yyyy}-{1:MM/yyyy}";

WinUI Calendar DateRange Picker Selection based on View Restriction

NOTE

Download demo from Github

You can navigate between elements in the dropdown calendar of Calendar DateRange Picker control by keyboard keys or by mouse interaction. The keyboard keys to navigate and select are listed below.

  • Tab or Shift+Tab - To navigate between date cell and elements in header.
  • UpArrow,DownArrow,LeftArrow and RightArrow - To navigate between calendar date or month or decade cells.
  • Space or Enter - To select a cell.
  • Ctrl + UpArrow and ctrl + DownArrow - To navigate between views (Example: Navigate from month to year view).
  • PageUp and PageDown - To navigate within views (Example: Navigate between months).
  • Home or End - To navigate to the first cells or last cell of current view.
  • Alt + DownArrow - To open the dropdown calendar.