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