Xin Calendar 2 Step-by-step: The user functions
yxScripts.com
Please pick a date: [ 2004-08-01 ]
Besides the helper functions, Xin Calendar 2 also provides some user functions that can be overwritten for customization purposes:
- beforeGetDateValue(ref_field, target_field) ... a void function, executes before the calendar gets the value of ref_field.
- ref_field ... defined in the showCalendar() call, the date field whose value is the date reference for the calendar
- target_field ... defined in the showCalendar() call, the date field whose value will be set by the calendar
- afterGetDateValue(ref_field, target_field, date) ... simply returns the [ date ] given, executes after the calendar gets the value of ref_field.
- ref_field ... same as above
- target_field ... same as above
- date ... the field value from the ref_field
- getDateValue(field) ... returns [ field.value ], the calendar calls it to get the value of the given field object.
- beforeSetDateValue(ref_field, target_field, date) ... returns the [ date ], executes before the calendar sets the value for target_field.
- afterSetDateValue(ref_field, target_field, date) ... a void function, executes after the calendar sets the value for target_field.
- setDateValue(field, date) ... simply executes [ field.value = date ], the calendar calls it to set the value for target_field.
- beforeScrollCalendar(name, year, month) ... a void function, executes before the calendar referred by the name scrolls to the given year and month.
- name ... the name parameter used in the showCalendar() call, a new parameter introduced in version 2.15
- year ... a 4-digit string
- month ... a 2-digit string ranges from "01" to "12"
- afterScrollCalendar(name, year, month) ... a void function, executes after the calendar referred by the name scrolls to the given year and month.
For example, we want to alert the date picked instead of updating a date field, then we can have:
<script language="javascript" src="../script/xc2_inpage.js"></script>
<script language="javascript">
function setDateValue(field, date) {
alert("You have picked: "+date);
}
</script>
We can also pass a function handler as the [ target_field ] parameter in the showCalendar() call and execute that function with the date picked as the parameter:
...
<script language="javascript">
function setDateValue(func, date) {
func(date);
}
</script>
...
<input ... onfocus="showCalendar('', alert, this, '', 'holder', 0, 0, 1)">
Likewise, we can customize the getDateValue() function to change the way a date reference is read. Thus, if we have the following setup, we can associate a calendar to a SPAN tag just like the one on page top:
function getDateValue(id) {
return document.getElementById(id).innerHTML;
}
function setDateValue(id, date) {
document.getElementById(id).innerHTML=date;
}
...
<SPAN ID="cal_tag" onclick="showCalendar('', 'cal_tag', 'cal_tag', ..., 1)">2004-08-01</SPAN>
[Scrolling arrows on bottom] [Back to index page]
# # #