New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Overview

The RadDateTimePicker control provides a flexible client-side API. In addition to a variety of client-side events, the client-side object model lets you achieve various tasks while avoiding unnecessary postbacks.

Getting the client-side object

All the API methods are accessible via the registered JavaScript objects for the RadDateTimePicker control. The following code snippet illustrates how you can get the client-side object of RadDateTimePicker:

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

Getting a reference to child elements

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

Object Type Method
RadInput get_dateInput()
RadCalendar get_calendar()
RadTimeView get_timeView()

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

Element Method
Entire control get_element()
CalendarPopupButton get_popupButton()
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 date

To get the selected date for a RadDateTimePicker control, use the get_selectedDate method. This method returns a Date object. To set the selected date, use the set_selectedDate method:

function incrementDate(picker) {
    var date = picker.get_selectedDate();
    date.setDate(date.getDate() + 1);
    picker.set_selectedDate(date);
}

You can also use the getTime and setTime methods of the embedded RadTimeView:

function getTime() {
    var picker = $find("<%=RadDateTimePicker1.ClientID%>");
    var view = picker.get_timeView();
    alert(view.getTime());
}       

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

On RadDateTimePicker you can use the clear() method:

function clearPickers() {
    var datetimepicker = $find("<%= RadDateTimePicker1.ClientID %>");
    datetimePicker.clear();
}

Enabling and disabling the RadDateTimePicker control

To enable or disable the RadDateTimePicker control, you need to call the set_enabled(bool) client-side method of the Picker client-side object:

function disable() {
    var picker = $find("<%= RadDateTimePicker1.ClientID %>");
    picker.set_enabled(false);
}
function enable() {
    var picker = $find("<%= RadDateTimePicker1.ClientID %>");
    picker.set_enabled(true);
}    
<telerik:RadScriptManager id="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadDateTimePicker RenderMode="Lightweight" ID="RadDateTimePicker1" runat="server"></telerik:RadDateTimePicker>


<input type="button" value="disable" onclick="disable()" />
<input type="button" value="enable" onclick="enable()" />

Showing and hiding the popup

The RadDateTimePicker objects include a number of methods for showing and hiding the popup controls:

Method Description
showPopup() Displays the popup calendar. Optionally you can specify a position for the popup.
hidePopup() Hides the popup calendar if it is visible.
togglePopup() Hides the popup calendar if it is visible and shows the popup if it is not.
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

In this article