Simple Calendar Control for Web Application
I originally did this back in 2007, but did not want to lose the content, so I decided to put it up here.
I found a robust and relatively simple calendar control to use for web UIs. It can use a pop-up window or a floating <div> tag. I prefer the latter as it makes the page look good and avoids a pop-up.
To use the control simply put the CalendarPopup.js file in your application’s “scripts” directory and be sure to include it in your JSP. (I used this in a Java app, but you can apply it to any language.)
Download the 
and put it in your images directory.
Add the following lines to your application’s JavaScript file (or include on the same page if you don’t have an external JS file):
// Set up Calendar control
var calObj = new CalendarPopup("calDiv");
calObj.showNavigationDropdowns();
calObj.setMonthNames('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');
// Handle the Calendar control
function doCalendar(destObjId, srcObj) {
calObj.select(document.getElementById(destObjId),srcObj.id,'dd-MMM-yyyy');
}
Then add the following lines to your JSP:
<script>document.write(getCalendarStyles());</script>
In your JSP, add the following HTML code where you want your date field and calendar control:
<input id="dateField" style="width: auto;" maxlength="11" name="actualDate" size="25" type="text" />
<img id="imgCal" onclick="doCalendar('dateField',this);return false;" src="cal.gif" border="0" alt="" />
That’s it!
In order to workaround IE 6′s inability to recognize the z-index attribute on the tag, I made some modifications to the original JavaScript code. You will need to pass the an ID value to be used for the hidden that will overlay the box.
var calObj = new CalendarPopup("calDiv", "calFrame");
You will also need to specify the following styles in a stylesheet. The ID values in the stylesheet must match the names of your DIV and IFRAME IDs on your page.
div#calDiv {
position:absolute; visibility:hidden;
background-color:white;
layer-background-color:white;
}
.select-free {
position:absolute; z-index:10;/*any value*/
overflow:hidden;/*must have*/
width:152px;/*do not change value for calendar control */;
}
.select-free iframe#calFrame {
display:none;/*sorry for IE5*/
display:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}
Your JSP now needs the following line:
<div id="calDiv" class="select-free"></div>
