DateNavigator Class

A DateNavigator control.

Namespace: DevExpress.WinUI.Editors

Assembly: DevExpress.WinUI.Editors.v21.1.dll

Declaration

C#

[TemplatePart(Name = "PART_CalendarHeader", Type = typeof(CalendarHeaderView))]
[TemplatePart(Name = "PART_CalendarPresenter", Type = typeof(CalendarPresenter))]
public class DateNavigator :
    Control,
    ICalendarEventsRaiser

VB.NET

<TemplatePart(Name:="PART_CalendarPresenter", Type:=GetType(CalendarPresenter))>
<TemplatePart(Name:="PART_CalendarHeader", Type:=GetType(CalendarHeaderView))>
Public Class DateNavigator
    Inherits Control
    Implements ICalendarEventsRaiser

Remarks

The DateNavigator control allows users to select dates (or a range of dates) and navigate through months, years, decades, and centuries.

Add DateNavigator to a Project

Follow the steps below to add a DateNavigator control to an application:

1. Reference the DevExpress WinUI NuGet package. Refer to the following topic for more information: Get Started.
2. Reference the xmlns:dxe="using:DevExpress.WinUI.Editors" assembly in the Page section.
3. Add the <dxe:DateNavigator>…</dxe:DateNavigator> markup to a XAML page.
4. Configure the component (see the sections below).

Select a Date

Users can click a date to select it. The DateNavigator header allows users to navigate between dates.

You can use the ViewMode property to specify a DateNavigator view: Month, Year, Decade, or Century.

Use the SelectedDate property to specify a date in code or to bind the selected date to a model’s field. The DateNavigator supports DateTime and Nullable DateTime data types.

XAML

<Page ...
    xmlns:System="using:System"
    xmlns:dxe="using:DevExpress.WinUI.Editors">
    <StackPanel Orientation="Vertical">
        <dxe:DateNavigator SelectedDate="{x:Bind DateValue}" DisplayDate="{x:Bind DateValue}" ViewMode="Year"/>
    </StackPanel>
</Page>

C#

public sealed partial class MainPage : Page {
    public DateTime DateValue { get; set; } = new DateTime(2021, 05, 24);

    public MainPage() {
        this.InitializeComponent(); }
}

Set a Date Range

Use the MinValue and MaxValue properties to specify a range of available dates. DateNavigator disables dates that are out of the range and hides navigation arrows for them.

NOTE

The maximum date should be greater than the minimum date. Otherwise, an exception occurs.

XAML

<Page ...
    xmlns:dxe="using:DevExpress.WinUI.Editors">

    <StackPanel Orientation="Vertical">
        <dxe:DateDateNavigator MinValue="{x:Bind StartDate}" MaxValue="{x:Bind EndDate}" />
    </StackPanel>
</Page>

C#

public sealed partial class MainPage : Page {
    public DateTime StartDate { get; set; } = new DateTime(2020, 05, 24);
    public DateTime EndDate { get; set; } = new DateTime(2022, 10, 01);

    public MainPage() {
        this.InitializeComponent(); }
}

Select Multiple Dates

Set the SelectionMode property to Multiple to enable multiple date selection in DateNavigator. The SelectedDates collection stores all the selected dates. To handle selection changes, use the SelectionChanged event.

To select a range of dates, users should select the initial date, hold the left mouse button, and move the mouse to the final date. To add/remove dates to/from the selection, users should click a date with the Ctrl key pressed.

XAML

<Page ...
    xmlns:dxe="using:DevExpress.WinUI.Editors">

    <StackPanel Orientation="Vertical">
        <dxe:DateDateNavigator SelectionMode="Multiple" />
    </StackPanel>
</Page>

Change a Calendar Culture

A DateNavigator culture changes calendar week and month names and the calendar type (for specific cultures). For example, the ar-SA calendar culture changes calendar week and month names and the calendar type to Saudi Hijri (Um Al Qura). Refer to the following MSDN topic to see the full list of supported calendar cultures: Windows Language Code Identifier (LCID).

Use the CalendarCulture property to change a DateNavigator calendar culture.

The following code sample changes the DateNavigator calendar week/month names to Spanish:

XAML

<Page ...
    xmlns:dxe="using:DevExpress.WinUI.Editors">

    <StackPanel Orientation="Vertical">
        <dxe:DateNavigator SelectedDate="{x:Bind DateValue}" DisplayDate="{x:Bind DateValue}" CalendarCulture="{x:Bind culture}" />
    </StackPanel>
</Page>

C#

public sealed partial class MainPage : Page {
    public DateTime DateValue { get; set; } = new DateTime(2021, 05, 24);
    public CultureInfo culture = new CultureInfo("es-ES");

    public MainPage() {
        this.InitializeComponent(); }
}

Customize Appearance

Member	Description
CellItemContainerStyle	Gets or sets the style applied to cell item containers. This is a dependency property.
CellItemTemplate	Gets or sets the template that defines the presentation of cell items within the calendar. This is a dependency property.
CenturyCellFormat	Gets or sets the format string for a century view cell’s display text. This is a dependency property.
CenturyHeaderFormat	Gets or sets the century view’s header text format string. This is a dependency property.
DayNameFormat	Gets or sets the format for days of the week. This is a dependency property.
DayNameTemplate	Gets or sets the template that defines the presentation of day names. This is a dependency property.
DecadeCellFormat	Gets or sets the format string for the display text in cells of the decade view. This is a dependency property.
DecadeHeaderFormat	Gets or sets the format string for the header of the decade view. This is a dependency property.
FirstDayOfWeek	Gets or sets the day of the week from which the Date Navigator’s week starts. This is a dependency property.
HeaderViewStyle	Gets or sets the style applied to the view header. This is a dependency property.
MonthCellFormat	Gets or sets the format string for the month view cell’s display text. This is a dependency property.
MonthHeaderFormat	Gets or sets the format string for the month view header text. This is a dependency property.
ShowDaysOfWeek	Gets or sets whether to display days of week when the Date Navigator shows the month view. This is a dependency property.
ShowWeekNumbers	Gets or sets whether to display week numbers when the Date Navigator shows the month view. This is a dependency property.
WeekNumberFormat	Gets or sets the format string for week numbers. This is a dependency property.
WeekNumberRule	Gets or sets the rule which specifies the first week of the year. This is a dependency property.
WeekNumberTemplate	Gets or sets the template that defines the presentation of week numbers displayed within the Date Navigator. This is a dependency property.
YearCellFormat	Gets or sets the format string for year view cells’ display text. This is a dependency property.
YearHeaderFormat	Gets or sets the format string for the year view’s header text. This is a dependency property.

Inheritance

Object

DependencyObject

UIElement

FrameworkElement

Control

DateNavigator