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 %>");
</script>
<telerik:RadTimePicker RenderMode="Lightweight" runat="server" ID="RadTimePicker1">
</telerik:RadTimePicker>
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);
picker.set_selectedDate(date);
}
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();
alert(view.getTime());
}
</script>
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 %>");
timepicker.clear();
}
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 %>");
picker.set_enabled(false);
}
function enable() {
var picker = $find("<%= RadTimePicker1.ClientID %>");
picker.set_enabled(true);
}
<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. |