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.
<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
MinDisplayMode="Month"
MaxDisplayMode="Decade"
DisplayMode="Month"/>
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.
<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
MinDisplayMode="Year"
MaxDisplayMode="Decade"
DisplayDateFormat="MM/yyyy"
/>
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.