View navigation in WinUI Calendar Date Picker

25 May 20223 minutes to read

You can easily navigate to the month, year, decade, or century views to select different dates by clicking the header button in drop-down calendar. Initially, month view is loaded, when dropdown is opened. You can also change the view programmatically by using theDisplayMode property.

Navigate between views

You can restrict navigation within a minimum and maximum views by using the MinDisplayMode and MaxDisplayMode properties. This will be useful when your date range is smaller and you do not want to show century view. By default, the value of MinDisplayMode is Month and MaxDisplayMode is Century.

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                               MinDisplayMode="Month"
                               MaxDisplayMode="Decade"
                               DisplayMode="Month"/>

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.MinDisplayMode = CalendarDisplayMode.Month;
sfCalendarDatePicker.MaxDisplayMode = CalendarDisplayMode.Decade;
sfCalendarDatePicker.DisplayMode = CalendarDisplayMode.Month;

NOTE

Download demo application from GitHub.

Selection based on view restriction

You can restrict users to select date within specific views (example : choosing validity date for credit card) in Calendar Date Picker control using the MinDisplayMode and MaxDisplayMode properties.

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker" 
                             MinDisplayMode="Year"
                             MaxDisplayMode="Decade"
                             DisplayDateFormat="MM/yyyy"
                             />

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.MinDisplayMode = CalendarDisplayMode.Year;
sfCalendarDatePicker.MaxDisplayMode = CalendarDisplayMode.Decade;
sfCalendarDatePicker.DisplayDateFormat = "MM/yyyy";

You can navigate between elements in the drop-down calendar of Calendar Date Picker control using keyboard shortcuts or mouse interaction. The following are the list of keyboard shortcuts to navigate and select.

• Tab or Shift+Tab - To navigate between date cells and elements in the header.
• UpArrow,DownArrow,LeftArrow and RightArrow - To navigate between calendar date, 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 or last cell of the current view.
• Alt + DownArrow - To open the drop-down calendar.