<!------------ Date Picker : Start Common Code - DO NOT MODIFY ------------>
/* Author 	: Susantha Soysa, Sri Lanka.
   Contact	: susanthas@hotmail.com/ susanthas@gmail.com
   Created Date	: 11/Feb/2006
   Last Modified: 02/Apr/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 <br> 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.initialize(); 		            // finally call the initalize method of the created object
	
*/ 
// ---------- Start Customizable data for Calendar ( for internationalization/ Curent Date ) ----------
var months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni","Juli", "Augustus", "September", "Oktober", "November", "Desember"];
var daysOfWeek = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
var todayCaption = "Today";

var currDate = (new Date()).getDate(); // Assign client date. To use server date, set the server date here using server script.
var weekStartDay = 1; // To Start from - Sunday : 0, Monday : 1 etc 
var nonWorkingDays = "6,0"; // Saturdays and Sundays are non-working days

// ---------- End Customizable data ----------
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var leapMonthDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var activeDp = null;
var mousePressed = false;
var calenderBuilding = false;

// capture the mouse leave event to hide the popup
document.onmouseup = documentMouseup;
//
function documentMouseup(){ if (mousePressed || calenderBuiling) { mousePressed = false; return false;}; 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 getDayNameCell(dayIndex){var dayClass = "dayNames"; if (!isWorkingDay(dayIndex)) dayClass = "nwDayNames"; return "<td align='center' class='" + dayClass + "' width=21>" + daysOfWeek[dayIndex].substring(0,2) + "</td>";}
function isWorkingDay(dayIndex){return nonWorkingDays.indexOf(dayIndex) < 0;}
function getDayClass(currentClass, dayIndex){var dateClass = currentClass; if (!isWorkingDay(dayIndex)) dateClass = "nwday";  return dateClass;}
function moveAuto(direction){var delay = 50; switch(direction){ case 'yearPrev': movePrev(false); break; case 'yearNext': moveNext(false); break; case 'monthPrev': delay = 300; movePrev(true); break; case 'monthNext': delay = 300; moveNext(true); break;} if (mousePressed) setTimeout('moveAuto("' + direction + '")',delay);}
function startAuto(direction){ mousePressed = true; setTimeout('moveAuto("' + direction + '")',300);}
function stopAuto(){mousePressed = false;}
function buildCalendar(dp){
  calenderBuiling = true;
  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 = "<table border=0 cellspacing=0 cellpadding=2 width='100%' height='100%' class='calbg' onclick='tryFocus(dp" + dp.id + ");' onfocus='tryFocus(dp" + dp.id + ");'>"
  calCode += "<tr><td align='center'><a href='##' class='linknormal' onmousedown='startAuto(\"yearPrev\");' onfocus='tryFocus(dp" + dp.id + ");'>&lt;</a></td><td colspan=5 align='center' class='year'><b>"+ dp.year +"</b></td><td align='center'><a href='##' class='linknormal' onmousedown='startAuto(\"yearNext\");' onfocus='tryFocus(dp" + dp.id + ");'>&gt;</a></td></tr>";
  calCode += "<tr><td align='center'><a href='##' class='linknormal' onmousedown='startAuto(\"monthPrev\");' onfocus='tryFocus(dp" + dp.id + ");'>&lt;</a></td><td colspan=5 align='center' class='month'>"+ months[m] +"</td><td align='center'><a href='##' class='linknormal' onfocus='tryFocus(dp" + dp.id + ");' onmousedown='startAuto(\"monthNext\");'>&gt;</a></td></tr>";
  calCode += "<tr>";
  for (i = 0; i < 7; i++) // we have only 7 days to print
    if (i + weekStartDay < 7) // print first day names
    	calCode += getDayNameCell(i + weekStartDay)
    else
	calCode += getDayNameCell(i + weekStartDay-7); // print last day names

  calCode += "</tr>";
  colIndex = 0;

  var dayIndex = 0;
  var loopDate = 0;
  var displayDate = new Date();
  displayDate.setMonth(m);
  displayDate.setFullYear(dp.year);
  displayDate.setDate(1);

  firstDay -= weekStartDay;
  if (firstDay < 0) 
    firstDay = 7 - weekStartDay;
  for (i = -firstDay + 1; i < 36 - firstDay ; i++)
  {
    loopDate = 0;	

    if (colIndex >6)
    {
      colIndex = 0;
      calCode += "</tr><tr>";
    }
    dayIndex = colIndex + weekStartDay;
    if (colIndex + weekStartDay > 6)
	dayIndex = 7 - dayIndex;
    colIndex++;
    

    if (days - i >= 35 && i < 0){
      calCode += "<td align='right' class='" + getDayClass("day",dayIndex) + "'>";
      loopDate  = 35 + i;
    }
    else if (i < 1 || i > days){
      calCode += "<td>";
      loopDate = 0;	
    }
    else if (i == currDate && dp.month == currMonth && dp.year == currYear){ 
      calCode += "<td align='right' class='" + getDayClass("cday",dayIndex) + "'>";
      loopDate  = i;	

    }
    else if (i > 0) {
      calCode += "<td align='right' class='" + getDayClass("day",dayIndex) + "'>";
      loopDate  = i;
    }

    if (loopDate > 0)
      displayDate.setDate(loopDate);

    if (loopDate <= 0)
	calCode += "&nbsp;";
    else if (isDateInRange(dp.fromDate, dp.toDate, displayDate))
	calCode += "<a href='##' class='linkbold' onfocus='tryFocus(dp" + dp.id + ");' onclick='setDate(dp" + dp.id + "," + loopDate.toString() + ");'>"+ loopDate.toString() +"</a>"
    else
	calCode += loopDate.toString();

    calCode += "</td>";
  }
  calCode += "</tr>";
  calCode += "<tr><td align='left' colspan=7 class='today'>";
  var currentDate = new Date(dp.year.toString() + "/" + months[dp.month-1] + "/" + currDate.toString());
  if (isDateInRange(dp.fromDate, dp.toDate, currentDate))
  	calCode += "<a href='##' onfocus='tryFocus(dp" + dp.id + ");' onclick='setDate(dp" + dp.id + ",0);'>" + todayCaption + ": " + months[dp.month-1] + " " + currDate.toString() + ", " + dp.year.toString() + "</a>";
  else
  	calCode += todayCaption + ": " + months[dp.month-1] + " " + currDate.toString() + ", " + dp.year.toString();

  calCode += "</td></tr>";
  dp.canvasElement.innerHTML = calCode;
  calenderBuiling = false;
}
<!------------ Date Picker : End Common Code ---------->
