Controlling Appearance

A number of properties let you control the look and feel of the RadTimePicker control:

• The Skin property lets you specify a skin to set the overall look and feel of any of the controls. You can even assign separate skins to the embedded RadDatePicker, RadTimePicker and RadDateTimePicker controls.

• You can use templates to add controls or HTML elements to parts of the RadTimeView control:

  • On RadTimeView, you can provide templates for the individual time values and to the header and footer.

• The ImagesPath property enables you to specify path to a directory that contains custom images which can replace the default ones. Note that in order for that property to work you need to also set EnableEmbeddedSkins="false".

Here is an example using the ImagesPath property:

<telerik:RadTimePicker RenderMode="Lightweight" EnableEmbeddedSkins="false" ImagesPath="~/Images" ID="RadTimePicker1" runat="server">
</telerik:RadTimePicker>

In addition to the properties mentioned above the RadTimePicker control provides the following options for further customization.

• The layout of the embedded time view popup on RadTimePicker can be configured

• The format of date and time values can be customized.

Animations

RadTimePicker supports JQuery fade-in/fade-out animation with predefined duration of 300ms (switched on by default). The animation is processed when the date picker popup is displayed/hidden or the fast navigation option of RadCalendar is used.

In order to change the duration of the animation, use the HideAnimation-Duration and ShowAnimation-Duration properties of RadTimePicker.

Following are some sample configurations:

<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" runat="server">
    <HideAnimation Duration="4444" />
    <ShowAnimation Duration="1111" />
</telerik:RadTimePicker>    

If RadTimePicker postbacks automatically (AutoPostBack property is set to true), the HideAnimation-Duration value is 0 and cannot be altered.