Localization and Formatting in WinUI Date Picker

22 Jul 202610 minutes to read

This section describes how to localize and format the WinUI Date Picker control using the CalendarIdentifier and Language properties and to change the display formats.

Change the type of calendar

The Date Picker control supports different types of calendars such as Gregorian, Julian, Hebrew, etc. You can change the calendar type by using the CalendarIdentifier property. The default value of the CalendarIdentifier property is GregorianCalendar.

You can select the required CalendarIdentifier value from the below types.

• JulianCalendar
• GregorianCalendar
• HebrewCalendar
• HijriCalendar
• KoreanCalendar
• TaiwanCalendar
• ThaiCalendar
• UmAlQuraCalendar
• PersianCalendar

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker 
                          x:Name="sfDatePicker"
                          CalendarIdentifier="HebrewCalendar"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.CalendarIdentifier = "HebrewCalendar";

NOTE

The Date Picker control updates the flow direction visually based on the CalendarIdentifier property value.

NOTE

When the CalendarIdentifier and FlowDirection properties are set, the FlowDirection property has higher precedence.

NOTE

Download demo application from GitHub

Change flow direction

You can change the flow direction of the Date Picker layout from right to left by setting the FlowDirection property value to RightToLeft. The default value of the FlowDirection property is LeftToRight.

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker  
                          x:Name="sfDatePicker"
                          FlowDirection="RightToLeft" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.FlowDirection = FlowDirection.RightToLeft;

NOTE

Download demo application from GitHub

Change the language

You can localize the Date Picker using the Language property. The default value of the Language property is en-US.

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker 
                          x:Name="sfDatePicker"
                          Language="ar-SA"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.Language = "ar-SA";

NOTE

The Date Picker control updates the flow direction visually based on the Language property value.

NOTE

When the Language and FlowDirection properties are set, the FlowDirection property has higher precedence.

NOTE

Download demo application from GitHub

Change editor display format

You can edit and display the selected date with various formatting options like date, month, and year formats by using the DisplayDateFormat property. The default value of the DisplayDateFormat property is d.

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker x:Name="sfDatePicker" 
                          DisplayDateFormat="MM/dd" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.DisplayDateFormat = "MM/dd";

NOTE

Download demo application from GitHub

Change the field value format in Spinner

You can customize the format of the date, month, and year fields in the spinner of the Date Picker control by using the DayFormat, MonthFormat, and YearFormat properties. By default, the value of the DayFormat property is {}{day.integer}, the value of the MonthFormat property is {}{month.abbreviated}, and the value of the YearFormat property is {}{year.full}.

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        DayFormat="{}{day.integer}"
                        MonthFormat="{}{month.full}"
                        YearFormat="{}{year.abbreviated}"
                        />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.DayFormat = "{day.integer}";
sfDatePicker.MonthFormat = "{month.full}";
sfDatePicker.YearFormat = "{year.abbreviated}";
sfDatePicker.HorizontalAlignment = HorizontalAlignment.Center;
sfDatePicker.VerticalAlignment = VerticalAlignment.Center;

Edit date using mask mode

By default, ‘Mask’ editing is enabled, which ensures that it contains only valid values. As soon as input is given, the value is validated and correction is done immediately. Once input is completed for a field, the cursor moves to the next field automatically.

Based on the DisplayDateFormat and your input values, date, month, and year field values are automatically corrected.

For example,

Default Masking	Input	Output
If you enter 29 into the date field and 2 (Feb) in the month field, the year field value is automatically changed to the upcoming leap year.	29 (in date field)
If you try to enter values between 13-19 in the month field, it will add the last input digit (3-9) in the month field and move the cursor to the next field.	18 (in month field)
If you try to enter input in the month field that is greater than 19, it will add the first digit in the month field and the last digit is added to the next field.	58 (in month field)

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker 
                          x:Name="sfDatePicker" 
                          EditMode="Mask" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.EditMode = DateTimeEditMode.Mask;

NOTE

Download demo application from GitHub

Edit date using free form editing

If you want to perform the validation after the user has completely entered their date inputs, set the EditMode property value to Normal. Then the entered date value is validated with the DisplayDateFormat property value when pressing the Enter key or losing focus. If the entered value does not match the DisplayDateFormat property, the previously selected date value is set to the SelectedDate property.

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker 
                          x:Name="sfDatePicker"
                          EditMode="Normal" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.EditMode = DateTimeEditMode.Normal;

NOTE

Download demo application from GitHub

Hide clear button in the editor

By default, the clear button X will be displayed in the editor of the Date Picker control, which can be used to clear the entered input. You can hide the clear button in the Date Picker control using the ShowClearButton property. The default value of the ShowClearButton property is true.

MainWindow.xaml

<Window
    ...
     xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <editors:SfDatePicker 
                          Name="sfDatePicker"
                          ShowClearButton="False"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Editors;

SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.ShowClearButton = false;