menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfTimePicker - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfTimePicker

    Represents a control that allows users to pick a time from the drop-down list and edit the time using a masked input.

    Inheritance
    System.Object
    SfDropDownBase
    DateTimePickerBase
    SfTimePicker
    Implements
    System.IDisposable
    Inherited Members
    DateTimePickerBase.AllowNull
    DateTimePickerBase.AllowNullProperty
    DateTimePickerBase.Description
    DateTimePickerBase.DescriptionProperty
    DateTimePickerBase.EditMode
    DateTimePickerBase.EditModeProperty
    DateTimePickerBase.Header
    DateTimePickerBase.HeaderProperty
    DateTimePickerBase.HeaderTemplate
    DateTimePickerBase.HeaderTemplateProperty
    DateTimePickerBase.OnGotFocus(RoutedEventArgs)
    DateTimePickerBase.OnKeyDown(KeyRoutedEventArgs)
    DateTimePickerBase.OnKeyUp(KeyRoutedEventArgs)
    DateTimePickerBase.OnPointerEntered(PointerRoutedEventArgs)
    DateTimePickerBase.OnPointerExited(PointerRoutedEventArgs)
    DateTimePickerBase.OnPointerPressed(PointerRoutedEventArgs)
    DateTimePickerBase.ShowClearButton
    DateTimePickerBase.ShowClearButtonProperty
    SfDropDownBase.CloseDropDown()
    SfDropDownBase.Content
    SfDropDownBase.ContentProperty
    SfDropDownBase.ContentTemplate
    SfDropDownBase.ContentTemplateProperty
    SfDropDownBase.Dispose()
    SfDropDownBase.DropDownButtonTemplate
    SfDropDownBase.DropDownButtonTemplateProperty
    SfDropDownBase.DropDownClosed
    SfDropDownBase.DropDownHeight
    SfDropDownBase.DropDownHeightProperty
    SfDropDownBase.DropDownMode
    SfDropDownBase.DropDownModeProperty
    SfDropDownBase.DropDownOpened
    SfDropDownBase.DropDownPlacement
    SfDropDownBase.DropDownPlacementProperty
    SfDropDownBase.IsOpen
    SfDropDownBase.IsOpenProperty
    SfDropDownBase.OnDeclineButtonClicked()
    SfDropDownBase.OnPrimaryButtonClicked()
    SfDropDownBase.OpenDropDown()
    SfDropDownBase.ShowDropDownButton
    SfDropDownBase.ShowDropDownButtonProperty
    SfDropDownBase.ShowSubmitButtons
    SfDropDownBase.ShowSubmitButtonsProperty
    Namespace: Syncfusion.UI.Xaml.Editors
    Assembly: Syncfusion.Editors.WinUI.dll
    Syntax
    public class SfTimePicker : DateTimePickerBase, IDisposable
    Examples

    The below examples shows, how to initialize the SfTimePicker control.

    <syncfusion:SfTimePicker />

    Constructors

    SfTimePicker()

    Initializes a new instance of the SfTimePicker class.

    Declaration
    public SfTimePicker()

    Fields

    BlackoutTimesProperty

    Identifies BlackoutTimes dependency property.

    Declaration
    public static readonly DependencyProperty BlackoutTimesProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the BlackoutTimes dependency property.

    ClockIdentifierProperty

    Identifies ClockIdentifier dependency property.

    Declaration
    public static readonly DependencyProperty ClockIdentifierProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    DisplayTimeFormatProperty

    Identifies DisplayTimeFormat dependency property.

    Declaration
    public static readonly DependencyProperty DisplayTimeFormatProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the DisplayTimeFormat dependency property.

    DropDownHeaderProperty

    Identifies DropDownHeader dependency property.

    Declaration
    public static readonly DependencyProperty DropDownHeaderProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the DropDownHeader dependency property.

    DropDownHeaderTemplateProperty

    Identifies DropDownHeaderTemplate dependency property.

    Declaration
    public static readonly DependencyProperty DropDownHeaderTemplateProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the DropDownHeaderTemplate dependency property.

    ItemContainerStyleProperty

    Identifies ItemContainerStyle dependency property.

    Declaration
    public static readonly DependencyProperty ItemContainerStyleProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemContainerStyle dependency property.

    ItemHeightProperty

    Identifies ItemHeight dependency property.

    Declaration
    public static readonly DependencyProperty ItemHeightProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemHeight dependency property.

    ItemTemplateProperty

    Identifies ItemTemplate dependency property.

    Declaration
    public static readonly DependencyProperty ItemTemplateProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemTemplate dependency property.

    ItemTemplateSelectorProperty

    Identifies ItemTemplateSelector dependency property.

    Declaration
    public static readonly DependencyProperty ItemTemplateSelectorProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemTemplateSelector dependency property.

    ItemWidthProperty

    Identifies ItemWidth dependency property.

    Declaration
    public static readonly DependencyProperty ItemWidthProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ItemWidth dependency property.

    MaxItemWidthProperty

    Identifies MaxItemWidth dependency property.

    Declaration
    public static readonly DependencyProperty MaxItemWidthProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the MaxItemWidth dependency property.

    MaxTimeProperty

    Identifies MaxTime dependency property.

    Declaration
    public static readonly DependencyProperty MaxTimeProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the MaxTime dependency property.

    MinItemWidthProperty

    Identifies MinItemWidth dependency property.

    Declaration
    public static readonly DependencyProperty MinItemWidthProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the MinItemWidth dependency property.

    MinTimeProperty

    Identifies MinTime dependency property.

    Declaration
    public static readonly DependencyProperty MinTimeProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the MinTime dependency property.

    PlaceholderTextProperty

    Identifies PlaceholderText dependency property.

    Declaration
    public static readonly DependencyProperty PlaceholderTextProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the PlaceholderText dependency property.

    SelectedTimeProperty

    Identifies SelectedTime dependency property.

    Declaration
    public static readonly DependencyProperty SelectedTimeProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the SelectedTime dependency property.

    ShowColumnHeadersProperty

    Identifies ShowColumnHeaders dependency property.

    Declaration
    public static readonly DependencyProperty ShowColumnHeadersProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ShowColumnHeaders dependency property.

    ShowDropDownHeaderProperty

    Identifies ShowDropDownHeader dependency property.

    Declaration
    public static readonly DependencyProperty ShowDropDownHeaderProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the ShowDropDownHeader dependency property.

    VisibleItemsCountProperty

    Identifies VisibleItemsCount dependency property.

    Declaration
    public static readonly DependencyProperty VisibleItemsCountProperty
    Field Value
    Type Description
    Microsoft.UI.Xaml.DependencyProperty

    The identifier for the VisibleItemsCount dependency property.

    Properties

    BlackoutTimes

    Gets or sets the collection of restricted times, that is not allowed to select.

    Declaration
    public DateTimeOffsetCollection BlackoutTimes { get; set; }
    Property Value
    Type Description
    DateTimeOffsetCollection

    The default value is null.

    Examples

    The following example shows how to add time in BlackoutTimes collections.

    SfTimePicker timepicker = new SfTimePicker();
    timepicker.BlackoutTimes = new DateTimeOffsetCollection();
    timepicker.BlackoutTimes.Add(new DateTimeOffset(DateTimeOffset.Now.Year,
    DateTimeOffset.Now.Month, DateTimeOffset.Now.Day, 04, 58, 34, DateTimeOffset.Now.Offset));
    Exceptions
    Type Condition
    System.ArgumentOutOfRangeException

    Blackout time should not be selected.

    ClockIdentifier

    Gets or sets the clock system to use.

    Declaration
    public string ClockIdentifier { get; set; }
    Property Value
    Type Description
    System.String

    The default clock isWindows.Globalization.ClockIdentifiers.TwelveHour .

    Remarks

    Set the ClockIdentifier property to specify the clock system used by the SfTimePicker. The SfTimePicker supports both 12HourClock and 24HourClock in the Windows.Globalization.ClockIdentifiers class. The ClockIdentifier property will not have effect when format contain HH time pattern in it.

    Examples

    The following example shows how to set the ClockIdentifier in SfTimePicker.

    <Grid>
       <syncfusion:SfTimePicker x:Name="timePicker" ClockIdentifier="24HourClock"/>
    </Grid>
    public MainPage()
    {
       this.InitializeComponent();
       timePicker.ClockIdentifier = Windows.Globalization.ClockIdentifiers.TwentyFourHour;
    }

    DisplayTimeFormat

    Gets or sets the pattern used to format the SelectedTime in editor.

    Declaration
    public string DisplayTimeFormat { get; set; }
    Property Value
    Type Description
    System.String

    The default value is "hh:mm tt".

    DropDownHeader

    Gets or sets the content of drop-down's header.

    Declaration
    public object DropDownHeader { get; set; }
    Property Value
    Type Description
    System.Object

    The object defines the header for drop-down. The default value is null.

    Remarks

    The drop-down header will be automatically collapsed, when value is null. You can set a DataTemplate for the Header value by using the DropDownHeaderTemplate property.

    Examples

    The following example shows how to define a DropdownHeader for the SfTimePicker control.

    <syncfusion:SfTimePicker x:Name="SfTimePicker" DropdownHeader="Select a date" />

    DropDownHeaderTemplate

    Gets or sets the DataTemplate used to display the content of the drop-down's header.

    Declaration
    public DataTemplate DropDownHeaderTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    The default value is null.

    Remarks

    The drop-down header will be automatically collapsed, when DropDownHeader is null. The DropDownHeader value is the data context of this DataTemplate.

    Examples

    The following example shows how to define a DropDownHeaderTemplate for the SfTimePicker control.

    <Page.Resources>
        <DataTemplate x:Name="DropdownHeaderTemplate">
            <Grid Background="PaleGreen">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="Red"
                    Text="{Binding}" />
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <syncfusion:SfTimePicker
            x:Name="SfTimePicker"
            DropdownHeaderTemplate="{StaticResource DropdownHeaderTemplate}" />
    </Grid>

    ItemContainerStyle

    Gets or sets the Microsoft.UI.Xaml.Style that is applied to the SpinnerItem generated for each item in SpinnerColumnView.

    Declaration
    public Style ItemContainerStyle { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Style

    The default value is null.

    Examples

    The following example shows how to define a ItemContainerStyle for the SfTimePicker control.

    <Page.Resources>
        <Style x:Key="ItemContainerStyle" TargetType="syncfusion:SpinnerItem">
            <Setter Property="FontStyle" Value="Oblique"/>
        </Style>
    </Page.Resources>
    <Grid>
        <syncfusion:SfTimePicker
            x:Name="SfTimePicker"
            ItemContainerStyle="{StaticResource ItemContainerStyle}"/>
    </Grid>

    ItemHeight

    Gets or sets the uniform height for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double ItemHeight { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 40.

    Remarks

    ItemHeight does not supports System.Double.NaN value.

    ItemTemplate

    Gets or sets the DataTemplate used to display each item in SpinnerColumnView.

    Declaration
    public DataTemplate ItemTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.DataTemplate

    The default value is null.

    Remarks

    DateTimeFieldItemInfo is the data context of this DataTemplate.

    Examples

    The following example shows how to define a ItemTemplate for the SfTimePicker control.

    <Page.Resources>
        <DataTemplate x:Name="ItemTemplate">
            <Grid
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="pink">
                <TextBlock
                    Foreground= "Red"
                    Text="{Binding DisplayText}" />
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <syncfusion:SfTimePicker
            x:Name="SfTimePicker"
            ItemTemplate="{StaticResource ItemTemplate}" />
     </Grid>

    ItemTemplateSelector

    Gets or sets the custom logic for choosing a template used to display each item.

    Declaration
    public DataTemplateSelector ItemTemplateSelector { get; set; }
    Property Value
    Type Description
    Microsoft.UI.Xaml.Controls.DataTemplateSelector

    The default is null.

    Remarks

    DateTimeFieldItemInfo is the data context of this DataTemplateSelector.

    Examples

    The following example shows how to define a ItemTemplateSelector for the SfTimePicker control.

    <Application.Resources>
        <DataTemplate x:Name="SelectorItemTemplate1">
            <Grid Background="Pink">
                <TextBlock Foreground="Yellow" Text="{Binding DisplayText}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Name="SelectorItemTemplate2">
            <Grid Background="Orange">
                <TextBlock Foreground="Red" Text="{Binding DisplayText}" />
            </Grid>
        </DataTemplate>
     </Application.Resources>
     <Page.Resources>
        <local:TimeItemTemplateSelector x:Key="timeTemplateSelector" />
     </Page.Resources>
        <Grid>
            <syncfusion:SfTimePicker
                x:Name="timePicker"
                ItemTemplateSelector="{StaticResource timeTemplateSelector}" />
      </Grid>
    public class TimeItemTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            if (item != null)
            {
                DateTimeFieldItemInfo dateTimeField = item as DateTimeFieldItemInfo;
                if (dateTimeField.Field == DateTimeField.Hour12)
                {
                    switch (dateTimeField.DateTime.Value.Hour)
                    {
                        case 2:
                            return Application.Current.Resources["SelectorItemTemplate1"] as DataTemplate;
                        case 5:
                            return Application.Current.Resources["SelectorItemTemplate2"] as DataTemplate;
                    }
                }
            }
            return base.SelectTemplateCore(item, container);
        }
    }

    ItemWidth

    Gets or sets the uniform width for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double ItemWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 80.

    Remarks

    If ItemWidth is NaN, item will automatically resize according to its content.

    MaxItemWidth

    Gets or sets the maximum width for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double MaxItemWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is System.Double.PositiveInfinity.

    MaxTime

    Gets or sets the maximum time available for picking.

    Declaration
    public DateTimeOffset MaxTime { get; set; }
    Property Value
    Type Description
    System.DateTimeOffset

    The maximum time available for picking.

    MinItemWidth

    Gets or sets the minimum width for all SpinnerItem in SpinnerColumnView.

    Declaration
    public double MinItemWidth { get; set; }
    Property Value
    Type Description
    System.Double

    The default value is 0.

    MinTime

    Gets or sets the minimum time available for picking.

    Declaration
    public DateTimeOffset MinTime { get; set; }
    Property Value
    Type Description
    System.DateTimeOffset

    The minimum time available for picking.

    PlaceholderText

    Gets or sets the text that is displayed in the editor until the SelectedTime is changed by a user action or some other operation.

    Declaration
    public string PlaceholderText { get; set; }
    Property Value
    Type Description
    System.String

    The default value is "Select a time".

    SelectedTime

    Gets or sets the currently selected time for SfTimePicker.

    Declaration
    public Nullable<DateTimeOffset> SelectedTime { get; set; }
    Property Value
    Type Description
    System.Nullable<System.DateTimeOffset>

    The default value is null.

    Remarks

    SelectedTimeChanging event will be fired before time is being changed. Time change can be canceled using this event. SelectedTimeChanged event will be fired when SelectedTime is changed.

    ShowColumnHeaders

    Gets or sets a value indicating whether the header of each column in drop-down can be shown or not.

    Declaration
    public bool ShowColumnHeaders { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if drop-down column Header can be shown; otherwise, false.The default value is true.

    ShowDropDownHeader

    Gets or sets a value indicating whether the drop-down header can be shown or not.

    Declaration
    public bool ShowDropDownHeader { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if drop-down Header is shown; otherwise, false. The default value is false.

    VisibleItemsCount

    Gets or sets the number of SpinnerItem that is visible to the drop-down.

    Declaration
    public int VisibleItemsCount { get; set; }
    Property Value
    Type Description
    System.Int32

    The number of items that displayed in drop-down. The default value is 7.

    Examples
    <syncfusion:SfTimePicker x:Name="timepicker" VisibleItemsCount="5" />

    Methods

    AttachFlyout()

    override the attachflyout.

    Declaration
    protected override void AttachFlyout()
    Overrides
    DateTimePickerBase.AttachFlyout()

    Dispose(Boolean)

    Release the unmanaged resources of SfDropDownBase.

    Declaration
    protected override void Dispose(bool disposing)
    Parameters
    Type Name Description
    System.Boolean disposing

    Used to indicate perform dispose or not.

    Overrides
    SfDropDownBase.Dispose(Boolean)

    OnAcceptButtonClicked()

    Called when Accept button is clicked.

    Declaration
    protected override void OnAcceptButtonClicked()
    Overrides
    SfDropDownBase.OnAcceptButtonClicked()

    OnApplyTemplate()

    Declaration
    protected override void OnApplyTemplate()
    Overrides
    DateTimePickerBase.OnApplyTemplate()

    OnCreateAutomationPeer()

    Declaration
    protected override AutomationPeer OnCreateAutomationPeer()
    Returns
    Type
    Microsoft.UI.Xaml.Automation.Peers.AutomationPeer

    UpdateValues()

    Helps to update Syncfusion.UI.Xaml.Editors.DateTimeHandler properties value.

    Declaration
    protected override void UpdateValues()
    Overrides
    DateTimePickerBase.UpdateValues()

    Events

    SelectedTimeChanged

    Occurs when the SelectedTime value is changed.

    Declaration
    public event EventHandler<SelectedDateTimeChangedEventArgs> SelectedTimeChanged
    Event Type
    Type
    System.EventHandler<SelectedDateTimeChangedEventArgs>

    SelectedTimeChanging

    Occurs before when the SelectedTime value is changed.

    Declaration
    public event EventHandler<TimeChangingEventArgs> SelectedTimeChanging
    Event Type
    Type
    System.EventHandler<TimeChangingEventArgs>

    TimeFieldItemPrepared

    Occurs when a SpinnerItem is loading, for each items in column or time field.

    Declaration
    public event EventHandler<DateTimeFieldItemPreparedEventArgs> TimeFieldItemPrepared
    Event Type
    Type
    System.EventHandler<DateTimeFieldItemPreparedEventArgs>
    Remarks

    Content and appearance of items in drop-down can be customized using this event.

    TimeFieldPrepared

    Occurs when a column or time field is loading.

    Declaration
    public event EventHandler<DateTimeFieldPreparedEventArgs> TimeFieldPrepared
    Event Type
    Type
    System.EventHandler<DateTimeFieldPreparedEventArgs>

    Implements

    System.IDisposable
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved