TimePicker

Time input with hours/minutes/seconds fields and clock icon.

Overview

TimePicker extends Control and provides a structured time input with separate editable fields for hours and minutes, and an optional seconds field controlled by the ShowSeconds property. A clock icon () is displayed alongside the fields for quick visual identification. When no time is selected, customizable placeholder text is shown. Users navigate between fields with Left/Right arrows, adjust values with Up/Down arrows (values wrap — e.g. hours wrap from 23 to 0 and minutes wrap from 59 to 0), or type digits directly for fast entry. The control uses 24-hour format by default.

Basic Example

<StackPanel Orientation="Vertical">
  <TextBlock Text="Select a time:" />
  <TimePicker PlaceholderText="Pick a time..." />
</StackPanel>

Properties

Property	Type	Default	Description
SelectedTime	TimeSpan?	null	The currently selected time, or null if no time is chosen.
ShowSeconds	bool	false	When true, displays an additional seconds field (HH:MM:SS).
Icon	string	"\uF017"	Nerd Font glyph displayed as the clock icon.
PlaceholderText	string	"Select time..."	Text shown when `SelectedTime` is null.
Width	Size	Auto	Explicit width of the control.
Height	Size	Auto	Explicit height of the control.
FocusColor	Color	Cyan	Border color when the control has keyboard focus.
HoverColor	Color	Yellow	Border color when the mouse hovers over the control.

Examples

Hours and Minutes

<StackPanel Orientation="Vertical">
  <TextBlock Text="Alarm time:" />
  <TimePicker SelectedTime="07:30" />
</StackPanel>

With Seconds

<StackPanel Orientation="Vertical">
  <TextBlock Text="Precise time:" />
  <TimePicker SelectedTime="14:30:45"
              ShowSeconds="True" />
</StackPanel>

Custom Icon

<StackPanel Orientation="Vertical">
  <TextBlock Text="Deadline:" />
  <TimePicker SelectedTime="17:00"
              Icon=""
              FocusColor="Red"
              PlaceholderText="Set deadline..." />
</StackPanel>

Keyboard Shortcuts

Key	Action
Left Arrow	Move focus to the previous field (seconds → minutes → hours).
Right Arrow	Move focus to the next field (hours → minutes → seconds).
Up Arrow	Increment the focused field by one. Hours wrap 23 → 0; minutes and seconds wrap 59 → 0.
Down Arrow	Decrement the focused field by one. Hours wrap 0 → 23; minutes and seconds wrap 0 → 59.
0–9	Direct digit entry — auto-advances to the next field when the current field is full.

Key Concepts

TimePicker extends Control and is focusable by default, with keyboard-driven field editing.
By default the control shows two fields (hours and minutes). Setting ShowSeconds="True" adds a third seconds field.
All fields use wrapping arithmetic — incrementing past the maximum rolls to zero, and decrementing below zero rolls to the maximum.
When SelectedTime is null the control renders PlaceholderText in a dimmed style; pressing any navigation or digit key initialises the time to 00:00.
The Icon property accepts any Nerd Font glyph, allowing you to swap the default clock icon for a project-specific symbol.
Use SelectedTime="{Binding ...}" with Mode=TwoWay for two-way data binding of the time value.