/* Author : Susantha Soysa, Sri Lanka. Contact : susanthas@hotmail.com/ susanthas@gmail.com Created Date : 11/Feb/2006 Copyright : The code is freely distributable, but appriciate if the Author and Contact email is included in the final source. The author will be delited with a short thanking email. Warranty : This code is provided "AS IS" and the author bares no warranty what so ever. Description : This Javascript DatePicker was created to overcome few problems with the existing calendars available in the internet. 1. Difficulty to deal with ComboBoxes 2. Slow navigation. 3. Difficulty to incorporate with the own code/ tracking events etc. This component has a common calendar building code which will be shared with other caledar controls. Each control can have a different set of properties to customize the behavior. id - string html id of the value control overlayControls - string, comma seperated controls ids to hide when the calender is popped up. Usually combo boxes month - integer, initial display month year - integer, initial display year canvas - string html div id, which will be used to render the calendar format - string, date format: supports d,dd,m,mm,mmm,yy,yy formats anchor - string, html anchor id which invokes the popup Also, when it is required to localize the display modify the section marked as, "Start Customizable data ( for internationalization/ Initial month )" The Calendar was tested in IE6 and Firefox browsers. HOW TO USE : Use the common javascript/ stylesheet to initialize the DatePickers. Add a text, div and an HTML Anchor elements to the page to pick the date. Assign html id's as necessary. Make sure to add a
tag before adding div tag ie: to make the calendar appear below the text box. At the end of the page create the javascript objects with appropriate properties as follows. eg : var dpStartDate = new DatePicker(); // create a new DatePicker object dpStartDate.id = "Age"; // value control id in the html page dpStartDate.overlayControls = "Sex2,DynaSubmit2"; // comma seperated html elemet ids. dpStartDate.month = 5; // start month of the calendar dpStartDate.year = 2007; // start year of the calendar dpStartDate.canvas = "dtDivAge"; // HTML div id which will be used to render the calendar dpStartDate.format = "dd-mmm-yyyy"; // date format dpStartDate.anchor = "ancAge"; // HTML anchor id which invokes the popup. dpStartDate.fromDate = "12-Feb-2004"; dpStartDate.toDate = "12-Feb-2008"; dpStartDate.initialize(); // finally call the initalize method of the created object */ var leapMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var monthDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var activeDp = null; // capture the mouse leave event to hide the popup document.onmouseup = documentMouseup; function documentMouseup(){tryBlur();} function DatePicker(){this.initialize = initialize_object;this.canBlur = true;function initialize_object(){if (this.canvas != null){this.canvasElement = getElement(this.canvas);}if (this.anchor != null){this.anchorElement = getElement(this.anchor);this.anchorElement.onclick = DatePicker_AnchorEvents;this.anchorElement.onmouseover = DatePicker_AnchorEvents;this.anchorElement.parent = this;}}function DatePicker_AnchorEvents(){if (activeDp != this.parent)doShow(this.parent);}} function getElement(id){var result = document.getElementById(id);return result == null ? document.all[id] : result;} function setDate(dp, day){var date = dp.format;if (day == 0){dp.year = currYear;dp.month = currMonth;day = currDate;} if (date.indexOf('yyyy') >= 0) date = date.replace('yyyy',dp.year.toString());else date = date.replace('yy',dp.year.toString().substring(2,4));if (date.indexOf('mmm') >= 0) date = date.replace('mmm', months[dp.month-1].substring(0,3));else if (date.indexOf('mm') >= 0){ var monthString = dp.month.toString();monthString = monthString.length == 1 ? '0' + monthString : monthString; date = date.replace('mm', monthString);}else date = date.replace('m', dp.month.toString()); if (date.indexOf('dd') >= 0){var dateString = day.toString();dateString = dateString.length == 1 ? '0' + dateString : dateString;date = date.replace('dd',dateString); }else date = date.replace('d',day);getElement(dp.id).value = date;dp.canBlur = true;doHide(dp);} function tryFocus(dp){ dp.canBlur = false; } function tryBlur(){if (activeDp != null) activeDp.canBlur = true;setTimeout("doHide();",50);} function movePrev(isMonth){var dp = activeDp;dp.canBlur = false;if (isMonth){if (dp.month > 1){dp.month --;}else{dp.month = 12;dp.year --;}}else dp.year--;buildCalendar(dp);} function moveNext(isMonth){var dp = activeDp;dp.canBlur = false;if (isMonth){if (dp.month < 12){dp.month ++;}else{dp.month = 1;dp.year ++;}}else dp.year++;buildCalendar(dp);} function doShow(dp){if (activeDp == dp){activeDp.canBlur = true;doHide();}else{if (activeDp != null){activeDp.canBlur = true;doHide();}if (dp.overlayControls != null){var cons = dp.overlayControls.split(",");for(i=0; i < cons.length; i++)getElement(cons[i]).style.visibility = "hidden";}dp.canBlur = false;dp.canvasElement.style.visibility = "visible";dp.canvasElement.style.zIndex = 1;activeDp = dp;buildCalendar(dp);}} function doHide(){if (activeDp != null && activeDp.canBlur) {activeDp.canvasElement.style.visibility = "hidden";activeDp.canvasElement.style.zIndex = -1;if (activeDp.overlayControls != null){var cons = activeDp.overlayControls.split(",");for(i=0; i < cons.length; i++)getElement(cons[i]).style.visibility = "visible";}activeDp = null;}} function isDateInRange(from, to, current){ var result = false; if (from == null && to == null) result = true; else if ((from != null && current < from) || (to != null && current > to)) result = false; else result = true; return result;} function buildCalendar(dp){ var m = dp.month - 1;var isLeap = true; if (dp.year % 4 != 0) isLeap = false; else if (dp.year % 400 == 0) isLeap = true; else if (dp.year % 100 == 0) isLeap = false; var days = monthDays[m]; if (isLeap) days = leapMonthDays[m]; var dDate = new Date(); dDate.setDate(1); dDate.setMonth(m); dDate.setFullYear(dp.year); var firstDay = dDate.getDay(); var calCode = "" calCode += ""; calCode += ""; calCode += ""; for (i = 0; i < 7; i++) calCode += "" calCode += ""; colIndex = 0; var loopDate = 0; var displayDate = new Date(); displayDate.setMonth(m); displayDate.setFullYear(dp.year); displayDate.setDate(1); for (i = -firstDay + 1; i < 36 - firstDay ; i++) { loopDate = 0; colIndex++; if (colIndex >7) { colIndex = 1; calCode += ""; } if (days - i >= 35 && i < 0){ calCode += ""; } calCode += ""; calCode += ""; dp.canvasElement.innerHTML = calCode; }

<	"+ dp.year +"					>
<	"+ months[m] +"					>
" + daysOfWeek[i].substring(0,2) + "
" loopDate = 35 + i; } else if (i < 1 || i > days){ calCode += "	"; loopDate = 0; } else if (i == currDate && dp.month == currMonth && dp.year == currYear){ calCode += "	"; loopDate = i; } else if (i > 0) { calCode += "	"; loopDate = i; } if (loopDate > 0) displayDate.setDate(loopDate); if (loopDate <= 0) calCode += " "; else if (isDateInRange(dp.fromDate, dp.toDate, displayDate)) calCode += ""+ loopDate.toString() +"" else calCode += loopDate.toString(); calCode += "
"; var currentDate = new Date(currYear.toString() + "/" + months[currMonth-1] + "/" + currDate.toString()); if (isDateInRange(dp.fromDate, dp.toDate, currentDate)) calCode += "" + todayCaption + ": " + months[currMonth-1] + " " + currDate.toString() + ", " + currYear.toString() + ""; else calCode += todayCaption + ": " + months[currMonth-1] + " " + currDate.toString() + ", " + currYear.toString(); calCode += "