View navigation in WinUI Calendar Date Picker

19 Apr 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 dropdown calendar. Initially month view is loaded when dropdown is opened. You can also change the view programmatically by using DisplayMode property.

Navigate 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 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 dropdown calendar of Calendar Date 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.