Edit this page

Client-side Programming Overview

The RadTimePicker control provides flexible client-side API. You can easily interact with the controls in the browser using their client-side objects. In addition to a variety of client-side events, the client-side object model enables you to achieve complicated tasks while avoiding unnecessary post-backs.

Getting the RadTimePicker client-side object

The API methods are accessible via the registered JavaScript object. A global variable with the same name as the ClientID of the control is available:

<script type="text/javascript">
    var timepicker = $find("<%= RadTimePicker1.ClientID %>");
<telerik:RadTimePicker RenderMode="Lightweight" runat="server" ID="RadTimePicker1">

Getting a reference to child elements

For the RadTimePicker you can access client-side objects for the child elements using the methods listed below:

Object Type Method
RadTimeView get_timeView()

In addition, you can access the DOM objects for various parts of the controls using the methods listed below:

Element Method
Entire control get_element()
TimePopupButton get_timePopupButton()
TextBox of input area get_textBox()
DIV for popup calendar get_popupContainer()
DIV for popup time view get_timePopupContainer()

Getting and setting the selected time

To get the selected time on a RadTimePicker control, use the get_selectedDate method. This method returns a Date object. To set the selected date, use the set_selectedDate method. The code snippet below illustrates how you can get the selected time and increment it by one hour.

function incrementTime(picker) {
   var date = picker.get_selectedDate();
   date.setHours(date.getHours() + 1);

On RadTimePicker you can also use the getTime and setTime methods of the embedded RadTimeView:

<script type="text/javascript">
    function getTime() {
        var picker = $find("<%=RadDateTimePicker1.ClientID%>");
        var view = picker.get_timeView();

Getting and setting minimum and maximum values

The following methods get or set the minimum and maximum values:

Method Description
get_minDate() Returns the minimum date as a Date object.
set_minDate(date) If the date is valid, sets the minimum date.
get_maxDate() Returns the maximum date as a Date object.
set_maxDate(date) If the date is valid, sets the maximum date.

Clearing selected values

To clear the selected value you can use the clear() method:

function clearPickers() {
    var timepicker = $find("<%= RadTimePicker1.ClientID %>");

Enabling and disabling the RadTimePicker control

To enable or disable a RadTimePicker control, you need to call the set_enabled(bool) client-side method:

function disable() {
    var picker = $find("<%= RadTimePicker1.ClientID %>");
function enable() {
    var picker = $find("<%= RadTimePicker1.ClientID %>");
<telerik:RadScriptManager id="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" runat="server"></telerik:RadTimePicker>
<br />
<input type="button" value="disable" onclick="disable()" />
<input type="button" value="enable" onclick="enable()" />

Showing and hiding the popup

The RadTimePicker object includes a number of methods for showing and hiding the popup controls:

Method Description
showTimePopup() Displays the popup time view. Optionally you can specify a position for the popup.
hideTimePopup() Hides the popup time view if it is visible.
toggleTimePopup() Hides the popup time view if it is visible and shows the popup if it is not.

See Also