Getting Started with WinUI Time Picker

19 May 20217 minutes to read

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

Structure of Time Picker control

Structure of WinUI TimePicker

Creating an application with WinUI Time Picker

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

Adding control manually in XAML

To add Time 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 SfTimePicker 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 Time Picker control -->
        <editors:SfTimePicker Name="sfTimePicker"/>
    </Grid>
</Page>

Adding control manually in C#

To add the Time 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 Time Picker namespace Syncfusion.UI.Xaml.Editors in C# page.
  4. Initialize the SfTimePicker 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 Time Picker control
            SfTimePicker sfTimePicker = new SfTimePicker();

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

WinUI TimePicker Control

NOTE

Download demo application from GitHub

Select time programmatically

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

SfTimePicker sfTimePicker= new SfTimePicker();
sfTimePicker.SelectedTime = new DateTimeOffset(new DateTime(2021, 10, 29, 10, 45, 10));

WinUI TimePicker displays Selected Time

NOTE

Download demo application from GitHub

Select time interactively

You can change the selected time interactively by enter the time value using keyboard or from the dropdown time spinner. You can get the selected time from the SelectedTime property.

<editors:SfTimePicker Name="sfTimePicker" />
SfTimePicker sfTimePicker= new SfTimePicker();

Changing Selected Time in WinUI TimePicker

NOTE

Download demo application from GitHub

Restrict selection

You can restrict users from:

  • Selecting time within a specific minimum and maximum time limit using MinTime and MaxTime properties.
  • Selecting a date from blocked dates using BlackoutTimes property.

For further reference Time Restriction.

Setting null value

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

<editors:SfTimePicker SelectedTime="{x:Null}"
                      AllowNullValue="True"
                      Name="sfTimePicker" />
SfTimePicker sfTimePicker= new SfTimePicker();
sfTimePicker.SelectedTime = null;
sfTimePicker.AllowNullValue = true;

WinUI TimePicker 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 Time Picker contains the SelectedTime property as null and AllowNullValue property as true. If AllowNullValue property is false, then the current system time is updated in SelectedTime property and displayed instead of PlaceHolderText.

<editors:SfTimePicker PlaceHolderText="pick a travel time"
                      SelectedTime="{x:Null}"
                      AllowNullValue="True"
                      Name="sfTimePicker" />
SfTimePicker sfTimePicker= new SfTimePicker();
sfTimePicker.PlaceHolderText = "pick a travel time";
sfTimePicker.SelectedTime = null;
sfTimePicker.AllowNullValue = true;

WinUI TimePicker displays Watermark Text

NOTE

Download demo application from GitHub

Time changed notification

You will be notified when selected time changed in Time Picker by using TimeChanged event. The TimeChanged event contains the old and newly selected time in the OldDateTime and NewDateTime properties.

  • OldDateTime - Gets a time which is previously selected.
  • NewDateTime - Gets a time which is currently selected.
<editors:SfTimePicker TimeChanged="SfTimePicker_TimeChanged" 
                      Name="sfTimePicker"/>
SfTimePicker sfTimePicker = new SfTimePicker();
sfTimePicker.TimeChanged += SfTimePicker_TimeChanged;

You can handle the event as follows:

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