Getting Started

RadTimePicker is a control that displays a time representation from which the user can select a single time.

In order to use RadTimePicker control in your projects you have to add references to the following assemblies:

1. Telerik.Windows.Controls

2. Telerik.Windows.Controls.Input

   You can find more info here.

HeaderText:

HeaderContent property can be used to customize the TimePickers header. You can use for header almost all types of controls.

Selection:

The SelectedTime property holds the selected time.

timePicker.SelectedTime = new TimeSpan(3,0,0);

Populating:

You can limit the times that can be selected by setting the StartTime and EndTime properties. The TimeInterval property allows user to specify the interval between time slots available for selection. RadTimePicker also allows binding to various data source types through ClockItemSource property.

<telerik:RadTimePicker x:Name="timePicker" TimeInterval="0:30:0" StartTime="0:0:0" EndTime="7:0:0" />

The following example demonstrate how to bind RadTimePicker to observable collection from TimeSpan objects.

public DataBinding()
{
    this.radTimePicker.ClockItemsSource = this.LoadDataObjects();
}
public ObservableCollection<TimeSpan> LoadDataObjects()
{
    ObservableCollection<TimeSpan> times = new ObservableCollection<TimeSpan>()
    { 
       new TimeSpan(9,0,0),
       new TimeSpan(10,0,0),
       new TimeSpan(10,5,0),
       new TimeSpan(10,22,0),
    };
    return times;
}

For more information on the handling the selection events, see the Binding section.

Clock:

If you need a clock that takes less space, use the RadClock control which in its essence is a panel with header and times and have almost all of the properties of TimePicker.

Styling and Appearance:

The TimePicker control has IconButtonStyle property that can be used to style the toggle button of the control and also support different layouts for the Clock using ClockPanel property. For more information see the Styling and Appearance section.