Getting Started with WinUI Date Picker

7 Jun 20217 minutes to read

This section explains the steps required to add the WINUI Date Picker control and its date selection options. This section covers only basic features needed to get started with Syncfusion Date Picker control.

Structure of Date Picker control

Structure of WinUI DatePicker

Creating an application with WinUI Date Picker

In this walkthrough, you will create a WinUI application that contains the Date Picker control.

Adding control manually in XAML

To add Date Picker control manually in XAML , follow the below steps.

  1. Create a WinUI 3 desktop app for C# and .NET 5 or WinUI 3 app in UWP for C#.
  2. Download and refer the following NuGet in the project.
  3. Import the control namespace Syncfusion.UI.Xaml.Editors in XAML or C# code.
  4. Initialize the SfDatePicker control.
<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Name="grid">
        <!--Adding Date Picker control -->
        <editors:SfDatePicker Name="sfDatePicker"/>
    </Grid>
</Page>

Adding control manually in C#

To add the Date Picker control manually in C#, follow the below steps.

  1. Create a WinUI 3 desktop app for C# and .NET 5 or WinUI 3 app in UWP for C#.
  2. Download and refer the following NuGet in the project.
  3. Import the Date Picker namespace Syncfusion.UI.Xaml.Editors in C# page.
  4. Initialize the Date Picker control.
using Syncfusion.UI.Xaml.Editors;

namespace GettingStarted
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // Creating an instance of the Date Picker control
            SfDatePicker sfDatePicker = new SfDatePicker();

            grid.Children.Add(sfDatePicker);
        }
    }
}

WinUI DatePicker Control

NOTE

Download demo application from GitHub

Select date programmatically

You can set or change the selected date programmatically by using SelectedDate property. If you not assign any value for the SelectedDate property, Date Picker will automatically assign the current system date as SelectedDate.

SfDatePicker sfDatePicker= new SfDatePicker();
sfDatePicker.SelectedDate = new DateTimeOffset(new DateTime(2021, 10, 29));

WinUI DatePicker displays Selected Date

NOTE

Download demo application from GitHub

Select date interactively

You can change the selected date interactively by enter the date value using keyboard or select from dropdown date spinner. You can get the selected date from the SelectedDate property.

<editors:SfDatePicker Name="sfDatePicker" />
SfDatePicker sfDatePicker= new SfDatePicker();

WinUI DatePicker displays Selected Date

NOTE

Download demo application from GitHub

Restrict selection

You can restrict users from:

  • Selecting date within a specific minimum and maximum range using MinDate and MaxDate properties.
  • Selecting a date from blocked dates using BlackoutDates property.
  • Selecting a date from specifically blocked set of dates (example : blocking weekend dates) using DateFieldItemPrepared event.

For further reference click_here.

Setting null value

If you want to set null value for the Date Picker, set the AllowNullValue property as true and set SelectedDate property as null. If AllowNullValue property is false, then the current system date is updated in SelectedDate property and displayed instead of null.

<editors:SfDatePicker SelectedDate="{x:Null}"
                      AllowNullValue="True"
                      Name="sfDatePicker" />
SfDatePicker sfDatePicker= new SfDatePicker();
sfDatePicker.SelectedDate = null;
sfDatePicker.AllowNullValue = true;

WinUI DatePicker displays Null Value

NOTE

Download demo application from GitHub

Setting watermark text

You can prompt the user with some information by using the PlaceHolderText property. This will be displayed only when the TimePicker contains the SelectedDate property as null and AllowNullValue property as true. If AllowNullValue property is false, then the current system time is updated in SelectedDate property and displayed instead of PlaceHolderText.

<editors:SfDatePicker PlaceHolderText="select a journey date"
                      SelectedDate="{x:Null}"
                      AllowNullValue="True"
                      Name="sfDatePicker" />
SfDatePicker sfDatePicker= new SfDatePicker();
sfDatePicker.PlaceHolderText = "select a journey date";
sfDatePicker.SelectedDate = null;
sfDatePicker.AllowNullValue = true;

WinUI DatePicker displays Watermark Text

NOTE

Download demo application from GitHub

Date changed notification

You will be notified when selected date changed in Date Picker by using DateChanged event. The DateChanged event contains the old and newly selected date in the OldDateTime, NewDateTime properties.

  • OldDateTime - Gets a date which is previously selected.
  • NewDateTime - Gets a date which is currently selected.
<editors:SfDatePicker DateChanged="SfDatePicker_DateChanged" 
                      Name="sfDatePicker"/>
SfDatePicker sfDatePicker = new SfDatePicker();
sfDatePicker.DateChanged += SfDatePicker_DateChanged;

You can handle the event as follows:

private void SfDatePicker_DateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {          
    Console.WriteLine("The previously selected Date: " + e.OldDateTime.ToString());
    Console.WriteLine("The newly selected Date: " + e.NewDateTime.ToString());            
}