RadCalendar Client-Side Basics
Yazan: esersahin 02/11/2008
http://www.telerik.com/help/aspnet-ajax/calendar_clientsidebasics.html
The RadCalendar controls provide a 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 lets you achieve complicated tasks while avoiding unnecessary post-backs.
Getting the client-side object
All the API methods are accessible via the registered JavaScript objects for each control. A global variable with the same name as the ClientID of the control is available for each control:
| [JavaScript] Getting the client-side object |  Copy Code |
|---|---|
|
var calendar = $find(“<%= RadCalendar1.ClientID %>“);
var datepicker = $find(“<%= RadDatePicker1.ClientID %>“; var timepicker = $find(“<%= RadTimePicker1.ClientID %>“; var datetimepicker = $find(“<%= RadDateTimePicker1.ClientID %>“; |
|
Getting a reference to child elements
For the RadDatePicker, RadTimePicker, and RadDateTimePicker, you can access client-side objects for the child elements using the methods listed below:
| Object Type | Method | Supported by |
|---|---|---|
| RadInput | get_dateInput() | RadDatePicker, RadTimePicker, RadDateTimePicker |
| RadCalendar | get_calendar() | RadDatePicker, RadDateTimePicker |
| RadTimeView | get_timeView() | RadTimePicker, RadDateTimePicker |
In addition, you can access the DOM objects for various parts of the controls using the methods listed below:
| Element | Method | Supported by |
|---|---|---|
| Entire control | get_element() | RadCalendar, RadDatePicker, RadTimePicker, RadDateTimePicker |
| CalendarPopupButton | get_popupButton() | RadDatePicker, RadDateTimePicker |
| TimePopupButton | get_timePopupButton() | RadTimePicker, RadDateTimePicker |
| TextBox of input area | get_textBox() | RadDatePicker, RadTimePicker, RadDateTimePicker |
| DIV for popup calendar | get_popupContainer() | RadDatePicker, RadDateTimePicker |
| DIV for popup time view | get_timePopupContainer() | RadTimePicker, RadDateTimePicker |
Getting and setting the selected date
The RadCalendar client object represents dates as triplets. Each triplet is an array of three integer values, which specify the year, month, and day of a date, in that order.
To get the selected date or dates on a RadCalendar control, use the get_selectedDates() method. This methods returns an array. If no date is selected, the array has length 0. If the calendar does not support multi-select mode, then the array has at most one element. Each date in the array is a triplet:
| [JavaScript] Getting the selected dates | Copy Code |
|---|---|
|
var calendar = $find(“<%= RadCalendar1.ClientID %>”);
var dates = calendar.get_selectedDates(); for (int i = 0; i < dates.length; i++) { var date = dates[i]; var year = date[0]; var month = date[1]; var day = date[2]; if (year < 2000) calendar.unselectDate(date); } |
|
To set the selected date on a RadCalendar control, use the selectDate() or selectDates() method:
| [JavaScript] Setting the selected dates | Copy Code |
|---|---|
|
function SelectTodayAndTomorrow()
{ var todaysDate = new Date(); var todayTriplet = [todaysDate.getFullYear(), todaysDate.getMonth()+1, todaysDate.getDate()]; var tomorrowTriplet = [todaysDate.getFullYear(), todaysDate.getMonth()+1, todaysDate.getDate() + 1]; var selectedDates = [todayTriplet, tomorrowTriplet]; var calendar = $find(“<%=RadCalendar1.ClientID%>”); calendar.selectDates(selectedDates, true); } |
|
To get the selected date on a RadDatePicker, RadTimePicker, or RadDateTimePicker control, use the get_selectedDate method. This method returns a Date object. To set the selected date, use the set_selectedDate method:
| [JavaScript] get_selectedDate and set_selectedDate | Copy Code |
|---|---|
|
function incrementDate(picker)
{ var date = picker.get_selectedDate(); date.setDate(date.getDate() + 1); picker.set_selectedDate(date); } |
|
On RadTimeView and RadDateTimeView, you can also use the getTime and setTime methods of the embedded RadTimeView:
| [JavaScript] getTime, setTime | Copy Code |
|---|---|
|
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 | Supported By | Description |
|---|---|---|
| get_rangeMinDate() | RadCalendar | Returns the triplet for the minimum date that the user can select. |
| set_rangeMinDate(triplet) | RadCalendar | Sets the minimum date to the date represented by a triplet. |
| get_rangeMaxDate() | RadCalendar | Returns the triplet for the maximum date that the user can select. |
| set_rangeMaxDate(triplet) | RadCalendar | Sets the maximum date to the date represented by a triplet. |
| get_minDate() | RadDatePicker, RadTimePicker, RadDateTimePicker | Returns the minimum date as a Date object. |
| set_minDate(date) | RadDatePicker, RadTimePicker, RadDateTimePicker | If the date is valid, sets the minimum date. |
| get_maxDate() | RadDatePicker, RadTimePicker, RadDateTimePicker | Returns the maximum date as a Date object. |
| set_maxDate(date) | RadDatePicker, RadTimePicker, RadDateTimePicker | If the date is valid, sets the maximum date. |
Clearing selected values
On RadCalendar, you can unselect individual dates using the unselectDate or unselectDates method:
| [JavaScript] Clearing the calendar | Copy Code |
|---|---|
|
function clearCalendar()
{ var calendar = $find(“<%= RadCalendar1.ClientID %>”); var dates = calendar.get_selectedDates(); calendar.unselectDates(dates); } |
|
On RadDatePicker, RadTimePicker, and RadDateTimePicker, you can use the clear() method:
| [JavaScript] Clearing RadDatePicker, RadTimePicker, and RadDateTimePicker | Copy Code |
|---|---|
|
function clearPickers()
{ var datepicker = $find(“<%= RadDatePicker1.ClientID %>”; datepicker.clear(); var timepicker = $find(“<%= RadTimePicker1.ClientID %>”; timepicker.clear(); var datetimepicker = $find(“<%= RadDateTimePicker1.ClientID %>”; datetimePicker.clear(); } |
|
Enabling and disabling the RadDatePicker, RadTimePicker, or RadDateTimePicker controls
To enable or disable a RadDatePicker, RadTimePicker, or RadDateTimePicker control, you need to call the set_enabled(true/false) client-side method of the Picker client-side object:
| [JavaScript] Enabling and disabling RadDatePicker | Copy Code |
|---|---|
|
<asp:ScriptManager id=“ScriptManager1″ runat=“server”></asp:ScriptManager>
<telerik:RadDatePicker ID=“RadDatePicker1″ runat=“server”></telerik:RadDatePicker> <br /> <script type=“text/javascript”> function disable() { var picker = $find(“<%= RadDatePicker1.ClientID %>”); picker.set_enabled(false); } function enable() { var picker = $find(“<%= RadDatePicker1.ClientID %>”); picker.set_enabled(true); } </script> <input type=“button” value=“disable” onclick=“disable()” /> <input type=“button” value=“enable” onclick=“enable()” /> |
|
Showing and hiding the popup
The RadDatePicker, RadTimePicker, and RadDateTimePicker objects include a number of methods for showing and hiding the popup controls:
| Method | Supported By | Description |
|---|---|---|
| showPopup() | RadDatePicker, RadDateTimePicker | Displays the popup calendar. Optionally you can specify a position for the popup. |
| hidePopup() | RadDatePicker, RadDateTimePicker | Hides the popup calendar if it is visible. |
| togglePopup() | RadDatePicker, RadDateTimePicker | Hides the popup calendar if it is visible and shows the popup if it is not. |
| showTimePopup() | RadTimePicker, RadDateTimePicker | Displays the popup time view. Optionally you can specify a position for the popup. |
| hideTimePopup() | RadTimePicker, RadDateTimePicker | Hides the popup time view if it is visible. |
| toggleTimePopup() | RadTimePicker, RadDateTimePicker | Hides the popup time view if it is visible and shows the popup if it is not. |
See Also