Telerik UI for Windows Phone by Progress

When using the RadTimePicker control you can format the following:

Display Value

The RadTimePicker control allows you to format the time displayed in it. To do that you have to specify a format string appropriate for the time value and set it to the DisplayValueFormat property of the RadTimePicker control. 

Defining format strings in XAML can be done in the following way - "{}:{0:your format string}" or "your format string".
          <telerikInput:RadTimePicker x:Name="radTimePicker" DisplayValueFormat="{}
{0:hh 'hours and' mm 'minutes' tt}" />
this.radTimePicker.DisplayValueFormat = "{00:hh 'hours and' mm 'minutes' tt}";

This is equivalent to the following:

          <telerikInput:RadTimePicker x:Name="radTimePicker" DisplayValueFormat="hh
'hours and' mm 'minutes' tt" />
this.radTimePicker.DisplayValueFormat = "hh 'hours and' mm 'minutes' tt";
To learn more about formatting visit the Formatting Overview chapter in MSDN.

Here is a snapshot of the result.

Time Picker-Formatting-01


The format string for the Selector is applied to the Date Selector UI inside the Date Selector Window. The formatting allows you to either change the order, in which the hours, the minutes and the period appear or to hide some of them. For example, if you want to display the period first and after it the hours and the minutes you can use "t/h/m" as format string. Here is an example.


It doesn't matter how the days, the months and the years are represented in the format string. It is used only to determine their order and visibility.

Recognized characters are:

  • h or H – defines the presence and order of the Hours Wheel.
  • m or M – defines the presence and order of the Minutes Wheel.
  • t or T – defines the presence and order of the Time Wheel.
<telerikInput:RadTimePicker x:Name="radTimePicker" SelectorFormat="t/h/m" />

If you don't want to display any of the date elements you can simply remove the desired part of the time from the format string. You can simply use the h, m and t letters in any order and combination to adjust the selector format.

Here is an example, where the period doesn't get shown.

<telerikInput:RadTimePicker x:Name="radTimePicker" SelectorFormat="h/m" />

Or you can just use:


Here is a snapshot of the example.

Time Picker-Formatting-02