Note: The content below is completely applicable for RadDateTimePicker control as well.
Getting the client-side object
You can get the client-side object for the RadTimePicker through its Client ID:
| JavaScript |
 Copy Code |
|
var radTimePicker = <%= RadTimePicker.ClientID %>; |
The RadTimePicker child controls (RadDateInput, TimePopupButton) are available via the DateInput, and TimePopupButton client-side properties. Getting the RadTimeView control instance is done via the GetTimeView() method.
Getting/Setting the time client-side
RadTimeView exposes a rich client-side API that allows you to control its behavior. You can manipulate the time selection by using the GetDate() / SetDate() methods:
| JavaScript |
Copy Code |
|
var radTimePicker = <%= RadTimePicker1.ClientID %>;
var timeView = radTimePicker.GetTimeView();
var time = timeView.GetDate(); |
Show/Hide the TimePopup
You can show/hide the time popup by using the ShowTimePopup() and HideTimePopup() client-side methods:
| JavaScript |
Copy Code |
|
var radTimePicker = <%= RadTimePicker1.ClientID %>;
radTimePicker.ShowTimePopup() |
OnClientTimeSelected event
This event occurs on the client when a time cell in the RadTimeView control is selected.
The following example demonstrates how to attach the OnClientSelectedEvent.
| ASPX |
Copy Code |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="RadCalendar.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function ClientTimeSelected(sender, args)
{
alert(args.oldTime);
alert(args.newTime);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<rad:RadTimePicker
ID="RadTimePicker1"
runat="server">
<TimeView OnClientTimeSelected="ClientTimeSelected">
</TimeView>
</rad:RadTimePicker>
</div>
</form>
</body>
</html> |
See Also