Add a calendar

When adding a calendar, you need only modify the JSP page on which the calendar displays.

  1. Include the DateUtil.js file in the JSP file which will display the calendar. To do so, add a line similar to the following example: 
    <SCRIPT SRC="/wcs/javascript/tools/common/DateUtil.js"></SCRIPT>

  2. Define the year, month, and day fields in which the user enters the date. To do so, add code similar to the following example: 
    <FORM NAME=form1 METHOD=POST>
   <INPUT TYPE=TEXT VALUE="" NAME=YEAR1 SIZE=4>
   <INPUT TYPE=TEXT VALUE="" NAME=MONTH1 SIZE=2>
   <INPUT TYPE=TEXT VALUE="" NAME=DAY1 SIZE=2>
</FORM>

    You can choose any names for the form and input fields, as long as they match the names used in the following steps.

  3. Initialize the Year, Month, and Day fields with the current date when page loads, using the following code: 
    function init() {
   document.form1.YEAR1.value = getCurrentYear();
   document.form1.MONTH1.value = getCurrentMonth();
   document.form1.DAY1.value = getCurrentDay();
   }
...
<BODY ONLOAD="init()">

  4. Define the calendar window by copying and pasting the following lines after the <BODY> tag: 
    <SCRIPT FOR=document EVENT="onclick()">
   document.all.CalFrame.style.display="none";
</SCRIPT>
<IFRAME name="calendar"  STYLE="display:none;position:absolute;width:198;height:230;z-index=100"
   ID="CalFrame" MARGINHEIGHT=0 MARGINWIDTH=0 NORESIZE FRAMEBORDER=0 SCROLLING=NO
   SRC="/webapp/wcs/tools/servlet/Calendar">
</IFRAME>

    This loads the calendar window into your JSP page, though it is initially invisible.

  5. Add the Calendar icon to your page using the following code. The calendar window displays when the icon is clicked. 
    <A HREF="javascript:setupDate();showCalendar(document.form1.calImg1)"> 
<IMG SRC="/wimages/tools/calendar/calendar.gif" BORDER=0 id=calImg1>

  6. Define the setupDate() function used when adding the calendar icon, using the following code: 
    function setupDate() {
   window.yearField = document.form1.YEAR1;
   window.monthField = document.form1.MONTH1;
   window.dayField = document.form1.DAY1;
}

    This function sets the targets for data set by your user in the calendar window.

Related concepts

Related reference