Adding a calendar
When adding a calendar, you need only modify the JSP page on which the calendar displays.
Procedure
- 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>
- 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>
Note: You can choose any names for the form and input fields, as long as they match the names used in the following steps. - 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()">
- 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" title="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.
- 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="/wcs/images/tools/calendar/calendar.gif" BORDER=0 id=calImg1>
- 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.