Skip to main content
Version: 11.0.x

TimePicker

The TimePicker has two or three 'spinner' controls to allow the user to pick a time value. The time picker can work in 24 or 12 hour formats. The picker controls display when the control is clicked.

Useful Properties​

You will probably use these properties most often:

PropertyDescription
ClockIdentifierChoose between 12 and 24 hour formats. The 12 hour format shows a third spinner for AM/PM.
MinuteIncrementDefines selectable increments for the minutes. The default is 1 (all minutes can be selected).
SelectedTime(Nullable TimeSpan) the selected time.

Example​

This example shows how to create a time picker for the 24 hour clock, with 20 minute time slots:

<StackPanel Margin="20" Spacing="4">
  <Label Content="Please choose your time:"/>
  <TimePicker ClockIdentifier="24HourClock"              
              MinuteIncrement="20"/>
</StackPanel>

Initializing the Time​

You can set the time value as an attribute in XAML. Use a string in the form Hh:Mm where Hh is hours and can be between 0 and 23 and Mm is minutes and can be between 0 and 59.

<TimePicker SelectedTime="09:15"/>

If you need to write code-behind, it can look like this:

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(9, 15, 0) // Seconds are ignored.
};

You can clear the display by resetting the selected time to null.

More Information​

info

For the complete API documentation about this control, see here.

info

View the source code on GitHub TimePicker.cs