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.
1. ref_field ... defined in the showCalendar() call, the date field whose value is the date reference for the calendar
2. 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.
1. ref_field ... same as above
2. target_field ... same as above
3. 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.

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]

# # #