TimePicker

The TimePicker control allows the user to pick a time value.
Examples
This example shows how to create a simple time picker with a header in XAML or in code.
XAML
CS
1
<TimePicker Header="Arrival time"/>
Copied!
1
TimePicker arrivalTimePicker = new TimePicker();
2
arrivalTimePicker.Header = "Arrival time";
Copied!
Remarks
Use a TimePicker to let a user enter a single time value. You can customize the DatePicker to use a 12-hour or 24-hour clock.
12-hour and 24-hour clocks
By default, the time picker shows a 12-hour clock with an AM/PM selector. You can set the ClockIdentifier property to "24HourClock" to show a 24-hour clock instead.
1
<TimePicker Header="12HourClock" SelectedTime="14:30"/>
2
<TimePicker Header="24HourClock" SelectedTime="14:30" ClockIdentifier="24HourClock"/>
Copied!
Minute increment
You can set the MinuteIncrement property to indicate the time increments shown in the minute picker. For example, 15 specifies that the TimePicker minute control displays only the choices 00, 15, 30, 45.
1
<TimePicker MinuteIncrement="15"/>
Copied!
Time values
The time picker control has both Time / TimeChanged and SelectedTime / SelectedTimeChanged APIs. The difference between these is that Time is not nullable, while SelectedTime is nullable.
The value of SelectedTime is used to populate the time picker and is null by default. If SelectedTime is null, the Time property is set to a TimeSpan of 0; otherwise, the Time value is synchronized with the SelectedTime value. When SelectedTime is null, the picker is 'unset' and shows the field names instead of a time.
Initializing a time value
In code, you can initialize the time properties to a value of type TimeSpan:
1
TimePicker timePicker = new TimePicker
2
{
3
    SelectedTime = new TimeSpan(14, 15, 00) // Seconds are ignored.
4
};
Copied!
You can set the time value as an attribute in XAML. This is probably easiest if you're already declaring the TimePicker object in XAML and aren't using bindings for the time value. 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.
1
<TimePicker SelectedTime="14:15"/>
Copied!
To use the time value in your app, you typically use a data binding to the SelectedTimeor Time property, use the time properties directly in your code, or handle the SelectedTimeChanged or TimeChanged event.
Reference
​TimePicker​
Source code
​TimePicker.cs​

TextBlock

TextBox

Last modified 1mo ago

Export as PDF

Copy link

Contents

Examples

Remarks

12-hour and 24-hour clocks