|
Tutorial - Client side functions
|
| | |
Handling a click event on client side
1. Define the javascript function that will be called when a date is selected.
You must define this function before the calendar.
Calendar will pass 2 parameters: 1. calendar object and 2. selected date
2. Assign just the function name to OnClientDateChanged property
Example:
<script type="text/javascript">
function onDateChange(sender, selectedDate) {
alert("You've selected \n" + selectedDate.toString());
}
</script>
<obout:Calendar runat="server"
OnClientDateChanged="onDateChange">
</obout:Calendar>
|
|
| | |
Formatting date
To format a date, you simply need to call formatDate(date, format) function on the calendar object, where date
is a javascript Date object and format is a valid format string. See date format tutorial for available formats.
Example:
<script type="text/javascript">
function onDateChange(sender, selectedDate) {
var formattedDate;
formattedDate = sender.formatDate(selectedDate, "MMM dd, yyyy");
alert("You've selected \n" + formattedDate);
}
</script>
<obout:Calendar runat="server"
OnClientDateChanged="onDateChange">
</obout:Calendar>
|
|
| | |
Setting a date
To set a new date, you may use setDate(firstMonth, selectedDate) property.
Example:
<obout:Calendar runat="server" id="myCal">
</obout:Calendar>
<a onclick="myCal.setDate(new Date(1982, 1, 1), new Date(1982, 1, 3));">
Click to set date to February 3, 1982
</a>
firstMonth argument is for specifying which month to display as first one.
selectedDate sets the selected date of the calendar.
Both arguments are optional and can be set to null.
|
Click to set date to February 3, 1982
|
| | |
Get the selected date
To get the selected date, you may use selectedDate property.
Example:
<obout:Calendar runat="server" id="myCal">
</obout:Calendar>
<a onclick="alert(myCal.selectedDate);">
Click to get the selected date
</a>
|
Get the selected date
|
| | |
Disabling calendar
Simply set enabled property to false if you need to disable the calendar.
Example:
<obout:Calendar runat="server" id="myCal">
</obout:Calendar>
<a onclick="myCal.enabled=false;">
Disable
</a>
<a onclick="myCal.enabled=true;">
Enable
</a>
|
Disable
Enable
|
| | |
| "I am very impressed with what your company has done." |
Rom Budhi |
|
| | |
|
