Click here to Skip to main content
15,894,017 members
Articles / Programming Languages / Javascript

DHTML Calendar Control with Time

Rate me:
Please Sign up or sign in to vote.
3.16/5 (10 votes)
25 Jan 2010LGPL32 min read 69K   1.1K   45  
DHTML Calendar control with Time
/*
Module		 : DHTML Calendar Control With Time
Credits		 : Sunil Kumtakar
Date Started : 20-Sep-2006
Last Updated : 12-Nov-2008
Version		 : 2.0.0
Copyright (c) 2007, 2008, 2009 Sunil Kumtakar

This file is part of DHTML Calendar Control With Time.

'DHTML Calendar Control With Time' is free software: you can redistribute it 
and/or modify it under the terms of the GNU Lesser General Public License as 
published by the Free Software Foundation, either version 3 of the License, 
or (at your option) any later version.

'DHTML Calendar Control With Time' is distributed in the hope that it will be
useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with 'DHTML Calendar Control With Time'.  
If not, see <http://www.gnu.org/licenses/>.

    param_default("inputField",     null);
    param_default("button",         null);
    param_default("readOnly",   false);         // true, false
    param_default("includeTime",   false);      // true, false
    param_default("includeSeconds",   true);    // true, false
    param_default("timeFormat",   "12");        // "12" , "24"
    param_default("mode",   "date");            //"date", "time"
    param_default("onSelectionCompleteCallBack",   null);
    param_default("dateTimeSeperator",   " ");
    param_default("timeSeperator",   ":");
    param_default("yearStart",   0);
    param_default("yearEnd",     0);
    param_default("isYearddl",     false);	// internal para
    param_default("showDayCalendar",     true);
    param_default("accessKey",     false);
    param_default("dateSeperator",     "-");
    param_default("dateFormat",     0);    // 1= dd-MM-yyyy; 2= MM-dd-yyyy; 3= dd-MMM-yyyy; 4= yyyy-MM-dd
    param_default("dateFormat_i",   0);    // internal para
    param_default("isDateFormatSet",     false);
    param_default("allowDeleteButton",     true);
*/

myCalendar = function() {
//Constructor
}

//Start: User Configuration
myCalendar.ImgPath = {
					imgClose: "myCalendar/Close.gif",
					imgScrollLeft: "myCalendar/Left.gif",
					imgScrollRight: "myCalendar/Right.gif",
					imgPopupCalendar: "myCalendar/SmallCal.gif"
					};
//End: User Configuration
myCalendar.MonthName = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
myCalendar.Days_In_Month = new Array('31', '28', '31', '30', '31', '30', '31', '31', '30', '31', '30', '31');
myCalendar.fillRequired=false;
myCalendar.created=false;
myCalendar.ctrlRef=new Array();
myCalendar.eventTriggeredBy = "";
myCalendar.isHidden=true;
myCalendar.browser="";
myCalendar.ControlId = {calendar: 'div$Calendar#', yearText: 'txt$Year#',
                  yearDDL: 'ddl$Year#', monthDDL:'ddl$Month#', dayDDL:'ddl$Day#',
                  hourDDL:'ddl$Hour#', minuteDDL:'ddl$Minute#', dayPartDDL:'ddl$DayPart#',
                  buttonSelect: "btn$Select#", tblDate: "tbl$CalendarDate#", cellAmPm: "cell$DayPartText#",
                  tblTime: "tbl$CalendarTime#", tdDisplay: "td$CalendarDisplay#", imgCalendar: "img$Calendar#",
                  tdDisplay1: "td$CalendarDisplay1#"};

myCalendar.weekdays = Array('Sun', 'Mon','Tue','Wed','Thu','Fri','Sat');
myCalendar.isCalendarVisible=false;
myCalendar.storedValues = {year: 0, month: 0};
myCalendar.tabControls = {startCtrl: "", endCtrl: myCalendar.ControlId['buttonSelect']};
myCalendar.hTimer = 0;
myCalendar.AUTO_CLOSE_TIMEOUT = 15 * 1000;	// timeout in seconds
myCalendar.mousePos = {x: 0, y: 0};
myCalendar.DF_DDMMYYYY = 1;
myCalendar.DF_MMDDYYYY = 2;
myCalendar.DF_DDMMMYYYY = 3;
myCalendar.DF_YYYYMMDD = 4;
myCalendar.KEY_F2 = 113;
myCalendar.KEY_DELETE = 46;
myCalendar.datePatterns = new Array(4); // 0 element is not used
	myCalendar.datePatterns[myCalendar.DF_DDMMYYYY] = /^(\d{1,2})(\/|\-)(\d{1,2})(\/|\-)(\d{4})$/;
	myCalendar.datePatterns[myCalendar.DF_MMDDYYYY] = /^(\d{1,2})(\/|\-)(\d{1,2})(\/|\-)(\d{4})$/;
	myCalendar.datePatterns[myCalendar.DF_DDMMMYYYY] = /^(\d{1,2})(\/|\-)(\S{3})(\/|\-)(\d{4})$/;
	myCalendar.datePatterns[myCalendar.DF_YYYYMMDD] = /^(\d{4})(\/|\-)(\d{1,2})(\/|\-)(\d{1,2})$/;

myCalendar.currentMonth = new Date().getMonth() + 1;
myCalendar.currentYear = new Date().getFullYear();
myCalendar.currentDay = new Date().getDate();
	
myCalendar.validYearKeys = function(obj) {
	var _keyCode;
	_keyCode = myCalendar.getKeyCode(obj);
	if (_keyCode >= 48 && _keyCode <= 57) {
		return true;
	}
	else {
		if (myCalendar.browser=="ie") {
			return myCalendar.cancelEvent(obj);
		}
		else {
			if (obj.keyCode==0) {
				return myCalendar.cancelEvent(obj);
			}
		}
	}
}

myCalendar.getDayCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['dayDDL']);
}

myCalendar.getMonthCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['monthDDL']);
}

myCalendar.getYearCtrl = function(obj) {
    if (typeof obj == "undefined") {
        if (myCalendar.getParameterValue('isYearddl')) {
            return myCalendar.getElementById(myCalendar.ControlId['yearDDL']);
        }
        else {
            return myCalendar.getElementById(myCalendar.ControlId['yearText']);
        }
    }
    else {
        if (obj=='ddl') {
            return myCalendar.getElementById(myCalendar.ControlId['yearDDL']);
        }
        else if(obj=='text') {
            return myCalendar.getElementById(myCalendar.ControlId['yearText']);
        }
    }
}

myCalendar.getClientDateCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.getParameterValue('inputField'));
}

myCalendar.getHourCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['hourDDL']);
}

myCalendar.getMinuteCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['minuteDDL']);
}

myCalendar.getSecondCtrl = function(obj) {
    return myCalendar.getElementById("ddl$Second#");
}

myCalendar.getDayPartCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['dayPartDDL']);
}

myCalendar.getDateCtrl = function(obj) {
	return myCalendar.getElementById(myCalendar.ControlId['tblDate']);
}

myCalendar.getTimeCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['tblTime']);
}

myCalendar.getCalendarCtrl = function(obj) {
    return myCalendar.getElementById(myCalendar.ControlId['calendar']);
}

myCalendar.getCellDayPartText = function(obj) {
    return myCalendar.getElementById("cell$DayPartText#");
}

myCalendar.getCellDayPartCtrl = function(obj) {
    return myCalendar.getElementById("cell$DayPartCtrl#");
}

myCalendar.getDay = function(obj) {
    return myCalendar.getDayCtrl().value;
}

myCalendar.getMonth = function(obj) {
    return myCalendar.getMonthCtrl().value;
}

myCalendar.getMonthInNumber = function(obj) {
    if (typeof obj == "undefined") {
        return myCalendar.getMonthCtrl().selectedIndex;
    }
    else {
        for(var _i=0; _i<myCalendar.MonthName.length; _i++) {
            if (myCalendar.MonthName[_i].toLowerCase() == obj.toLowerCase()) {
                return _i+1;
            }
        }
        return '';
    }
}

myCalendar.getYear = function(obj) {
    return myCalendar.getYearCtrl().value;
}

myCalendar.getHour = function(obj) {
    return myCalendar.getHourCtrl().value;
}

myCalendar.getMinute = function(obj) {
    return myCalendar.getMinuteCtrl().value;
}

myCalendar.getSecond = function(obj) {
    return myCalendar.getSecondCtrl().value;
}

myCalendar.getDayPart = function(obj) {
    return myCalendar.getDayPartCtrl().value;
}

myCalendar.getDateValue = function(obj) {
    var _get = myCalendar.getFormat();    
    var _iformat, sDate, sTime;
    sDate=sTime="";
    for(_iformat=0; _iformat<_get.length; _iformat++) {
        if (obj=='date') {
            if (_get[_iformat] == "dd") {
                if (sDate != "") sDate += myCalendar.getParameterValue("dateSeperator");
                //to add '0' prefix
                if (myCalendar.getDay().length<2) {
					sDate += '0' + myCalendar.getDay();
                }
                else {
					sDate += myCalendar.getDay();
                }
            }
            else if (_get[_iformat] == "MMM") {
                if (sDate != "") sDate += myCalendar.getParameterValue("dateSeperator");
                sDate += myCalendar.getMonth();
            }
            else if (_get[_iformat] == "yyyy") {
                if (sDate != "") sDate += myCalendar.getParameterValue("dateSeperator");
                sDate += myCalendar.getYear();
            }
            else if (_get[_iformat] == "MM") {
                if (sDate != "") sDate += myCalendar.getParameterValue("dateSeperator");
                if (myCalendar.getMonthInNumber() < 9) {
					sDate += '0' + myCalendar.getMonthInNumber();
                }
                else {
					sDate += myCalendar.getMonthInNumber();
                }                
            }
        }
        else if(obj=='time') {
            if (_get[_iformat] == "hh") {
                if (sTime!="") sTime += myCalendar.getParameterValue('timeSeperator');
                sTime += myCalendar.getHour();
            }
            else if (_get[_iformat] == "mm") {
                if (sTime!="") sTime += myCalendar.getParameterValue('timeSeperator');
                sTime += myCalendar.getMinute();
            }
            else if (_get[_iformat] == "ss") {
                if (sTime!="") sTime += myCalendar.getParameterValue('timeSeperator');
                sTime += myCalendar.getSecond();
            }
            else if (_get[_iformat] == "ampm") {
				if (sTime!="")
				{
					sTime += " ";
					sTime += myCalendar.getDayPart();
                }
            }
        }
    }
    if (sTime != "" && sDate != "") {
        sDate += " " + sTime;
    }
    else if (sTime != "" && sDate == ""){
        sDate = sTime;
    }
    return sDate;
}

myCalendar.monthChanged = function(obj) {
	var objDay;
	var objCounter;
	var objMonth = myCalendar.getMonthCtrl();
	var lastday = myCalendar.Days_In_Month[objMonth.selectedIndex-1];
	if (objMonth.selectedIndex == 2 && myCalendar.isLeapYear(myCalendar.getYear(), myCalendar.getMonthInNumber())) {
	    lastday = 29;
	}
	var selValue;
	objDay = myCalendar.getDayCtrl();
	selValue = objDay.value;
	myCalendar.clearList(objDay);
	for(objCounter=1; objCounter <= lastday; objCounter++) {
	    if (objCounter==1) {
		    objDay.length++;
		    objDay.options[objDay.length-1].text = '';
		    objDay.options[objDay.length-1].value = '';
	    }
		objDay.length++;
		objDay.options[objDay.length-1].text = objCounter;
		objDay.options[objDay.length-1].value = objCounter;
		if (objCounter == selValue) {
			objDay.options[objDay.length-1].selected=true;
		}
	}
}

myCalendar.yearChanged = function(obj) {
    myCalendar.monthChanged();
}

myCalendar.fillDate = function(obj) {
    var objCounter;
    //static display start
    if (!myCalendar.fillRequired) {
	    var objDay, objMonth, objYear;
	    objDay = myCalendar.getDayCtrl();
	    objMonth = myCalendar.getMonthCtrl();
	    objYear = myCalendar.getYearCtrl();
	    for(objCounter=1; objCounter <= 31; objCounter++) {
	        if (objCounter==1) {
	            objDay.length++;
		        objDay.options[objDay.length-1].text = '';
		        objDay.options[objDay.length-1].value = '';
	        }
		    objDay.length++;
		    objDay.options[objDay.length-1].text = objCounter;
		    objDay.options[objDay.length-1].value = objCounter;
	    }
	    for(objCounter=1; objCounter <= 12; objCounter++) {
	        if (objCounter==1) {
	            objMonth.length++;
		        objMonth.options[objMonth.length-1].text = '';
		        objMonth.options[objMonth.length-1].value = '';
	        }
		    objMonth.length++;
		    objMonth.options[objMonth.length-1].text = myCalendar.MonthName[objCounter-1];
		    objMonth.options[objMonth.length-1].value = myCalendar.MonthName[objCounter-1];
	    }
	    myCalendar.fillRequired = true;
	}
	//static display end

	//dynamic display start
	if (myCalendar.getParameterValue('includeTime') || myCalendar.getParameterValue('mode')=="time") {
	    var objHour, objMinute, objSecond, objDayPart, objTimeFormat;
	    objTimeFormat = 12; //default
	    if (myCalendar.getParameterValue('timeFormat') == "24") {
	        objTimeFormat = 24;
	    }
	    objHour = myCalendar.getHourCtrl();
	    objMinute = myCalendar.getMinuteCtrl();
//	    objSecond = myCalendar.getSecondCtrl();
	    objDayPart = myCalendar.getDayPartCtrl();
	    //objHour.length = 0; objMinute.length=0; /*objSecond.length =0;*/ objDayPart.length=0;
	    myCalendar.clearList(objHour);
	    myCalendar.clearList(objMinute);
	    myCalendar.clearList(objDayPart);

	    if (objTimeFormat == 12) {
	        for(objCounter=1; objCounter <= 12; objCounter++) {
	            if (objCounter==1) {
		            objHour.length++;
		            objHour.options[objHour.length-1].text = '';
		            objHour.options[objHour.length-1].value = '';
	            }
		        objHour.length++;
		        objHour.options[objHour.length-1].text = myCalendar.padRight(objCounter, 2, '0');
		        objHour.options[objHour.length-1].value = myCalendar.padRight(objCounter, 2, '0');
	        }
	    }
	    else {
	        for(objCounter=0; objCounter <= 23; objCounter++) {
	            if (objCounter==0) {
		            objHour.length++;
		            objHour.options[objHour.length-1].text = '';
		            objHour.options[objHour.length-1].value = '';
	            }
		        objHour.length++;
		        objHour.options[objHour.length-1].text = myCalendar.padRight(objCounter, 2, '0');
		        objHour.options[objHour.length-1].value = myCalendar.padRight(objCounter, 2, '0');
	        }
	    }
	    for(objCounter=0; objCounter <= 59; objCounter++) {
	        if (objCounter==0) {
		        objMinute.length++;
		        objMinute.options[objMinute.length-1].text = '';
		        objMinute.options[objMinute.length-1].value = '';
	        }
		    objMinute.length++;
		    objMinute.options[objMinute.length-1].text = myCalendar.padRight(objCounter, 2, '0');
		    objMinute.options[objMinute.length-1].value = myCalendar.padRight(objCounter, 2, '0');
	    }

		objDayPart.length++;
		objDayPart.options[objDayPart.length-1].text = "AM";
		objDayPart.options[objDayPart.length-1].value = "AM";
		objDayPart.length++;
		objDayPart.options[objDayPart.length-1].text = "PM";
		objDayPart.options[objDayPart.length-1].value = "PM";
	}

	//year ddl start
	if (myCalendar.getParameterValue('isYearddl')) {
	    objYear = myCalendar.getYearCtrl();
	    myCalendar.clearList(objYear);
	    for(objCounter=myCalendar.getParameterValue('yearStart'); objCounter<=myCalendar.getParameterValue('yearEnd'); objCounter++) {
	        if (objCounter==myCalendar.getParameterValue('yearStart')) {
	            objYear.length++;
		        objYear.options[objYear.length-1].text = '';
		        objYear.options[objYear.length-1].value = '';
	        }
		    objYear.length++;
		    objYear.options[objYear.length-1].text = objCounter;
		    objYear.options[objYear.length-1].value = objCounter;
	    }
	    myCalendar.getYearCtrl('text').style.display='none';
	    myCalendar.getYearCtrl('ddl').style.display='block';
	    myCalendar.tabControls['startCtrl']= myCalendar.ControlId['yearDDL'];
	}
	else {
	    myCalendar.getYearCtrl('text').style.display='block';
	    myCalendar.getYearCtrl('ddl').style.display='none';
	    myCalendar.tabControls['startCtrl']= myCalendar.ControlId['yearText'];
	}
	//year ddl end
	//Dynamic display ends
}

myCalendar.validTime = function(obj) {
    var _retVal;
    _retVal = true;
    if (myCalendar.getParameterValue('timeFormat')=="12") {
        if (myCalendar.getHour()=='' || myCalendar.getMinute()=='' || myCalendar.getDayPart()=='') {
            _retVal = false;
        }
    }
    else {//24 hrs
        if (myCalendar.getHour()=='' || myCalendar.getMinute()=='') {
            _retVal = false;
        }
    }
    return _retVal;
}

myCalendar.validDate = function(obj) {
    var _retVal;
    _retVal = true;
    if (myCalendar.getDay()=='' || myCalendar.getMonth()==''
            || myCalendar.getYear()=='') {
        _retVal = false;
    }
    return _retVal;
}

myCalendar.actionShow = function(obj) {
	myCalendar.createCalendar();
    myCalendar.actionHide();
    myCalendar.eventTriggeredBy = myCalendar.eventRaisedBy(obj);
    myCalendar.fillDate(obj);    
    myCalendar.prepareForDisplay();
    myCalendar.clearCalendarDisplay();
    myCalendar.isCalendarVisible=false;

    var divCal = myCalendar.getCalendarCtrl();
    myCalendar.positionSelf();
    divCal.style.display="block";
    todo:
    try {
		myCalendar.setDate();
    }
    catch(e) {}
    myCalendar.hideShowCovered();
    if (myCalendar.getParameterValue('mode')=="time") {
        myCalendar.getHourCtrl().focus();
    }
    else {
        myCalendar.getYearCtrl().focus();
        if (myCalendar.getParameterValue('showDayCalendar')) {
			myCalendar.showCalendar();
        }
    }
    myCalendar.isHidden=false;
    myCalendar.addEvent(document, 'mousemove', myCalendar.handleMouseMove);
    myCalendar.hTimer = window.setTimeout('myCalendar.actionLostFocus(event)', myCalendar.AUTO_CLOSE_TIMEOUT);
    myCalendar.refresh();
}

myCalendar.actionHide = function(obj) {
    var divCal = myCalendar.getCalendarCtrl();
    myCalendar.hideShowCovered();
    divCal.style.display="none";
    myCalendar.isHidden=true;
    myCalendar.removeEvent(document, 'mousemove', myCalendar.handleMouseMove);
    if (myCalendar.hTimer != 0) {
		window.clearTimeout(myCalendar.hTimer);
		myCalendar.hTimer = 0;
    }
}

myCalendar.setup = function(param) {
	if (myCalendar.browser == '')  myCalendar.getBrowserInfo();
	
    myCalendar.setParameter(param);
    var divCal = myCalendar.getCalendarCtrl();
    myCalendar.getElementById(param['button']).onclick = myCalendar.actionShow;
}

myCalendar.isDebug = true;

myCalendar.debug = function(obj) {
    if (myCalendar.isDebug) {
        if (obj!=null) alert(obj);
    }
}

myCalendar.isLeapYear = function(nYear, nMonth) {
    return (((0 == (nYear%4)) && ( (0 != (nYear%100)) || (0 == (nYear%400)))) && nMonth == 2 && nYear !=0);
}

myCalendar.dateSelectComplete = function(obj) {
    var _sDate, _sTime, _valid=true;
    var date$;
    _sDate=_sTime='';

    if (myCalendar.getParameterValue('mode')=='date') {
        if (!myCalendar.validDate()) _valid = false;
        if (myCalendar.getParameterValue('includeTime')) {
            if (!myCalendar.validTime()) _valid = false;
        }
        if (_valid) {
            _sDate = myCalendar.getDateValue('date')+'';
            _sTime = myCalendar.getDateValue('time')+'';
            if (_sDate != '' && _sTime != '') {
                _sDate += myCalendar.getParameterValue('dateTimeSeperator') + _sTime;
            }
            else {
                _sDate += _sTime;
            }
        }
    }
    else if(myCalendar.getParameterValue('mode')=='time') {
        if (!myCalendar.validTime()) _valid = false;
        if (_valid) {
            _sDate = myCalendar.getDateValue('time')+'';
        }
    }
    myCalendar.reset();
    if (_valid) {
        myCalendar.getClientDateCtrl().value = _sDate;
        myCalendar.actionHide();
        if (typeof myCalendar.getParameterValue('onSelectionCompleteCallBack') == "function") {
			date$ = myCalendar.parseDate(_sDate);
            myCalendar.getParameterValue('onSelectionCompleteCallBack')(date$); //client callback
        }
    }
}

myCalendar.controlKeys4Year = function(obj) {
	var _keyCode;
	_keyCode = myCalendar.getKeyCode(obj);
    if (_keyCode==38 || _keyCode==40 || _keyCode==33 || _keyCode==34) {
        var nYear = parseInt(myCalendar.getYear());
        if(_keyCode==38) {
            nYear--;
        }
        else if(_keyCode==40) {
            nYear++;
        }
        else if (_keyCode==33) {
            nYear-=10;
        }
        else if (_keyCode==34) {
            nYear+=10;
        }
        if (nYear>0) {
            myCalendar.getYearCtrl().value = nYear;
            myCalendar.yearChanged(obj);
        }
        else {
            nYear = (new Date()).getFullYear();
            myCalendar.getYearCtrl().value = nYear;
            myCalendar.yearChanged(obj);
        }
    }
}

myCalendar.createElement = function(type, parent) {
    var el =null;
	el = document.createElement(type);
	if (typeof parent != "undefined") {
		parent.appendChild(el);
	}
	return el;
}

myCalendar.createCalendar = function(obj) {
    if(!myCalendar.created) {
        var table, div, tblDate, tblTime, divDummy;
        var tblDummy, cellDummy;
        div = myCalendar.createElement("div");
        div.id= myCalendar.ControlId['calendar'];
        div.name= myCalendar.ControlId['calendar'];
        div.style.display='none';
        div.style.position = "absolute";
        div.className = "calendar";

        tblDate = myCalendar.createElement("table");
        tblDate.className="calendarTable";
        tblDate.id= myCalendar.ControlId['tblDate'];
        tblDate.name=myCalendar.ControlId['tblDate'];
		myCalendar.setStyleAttribute(tblDate, "border-collapse:collapse");
        tblDate.border='1';

        var tbody = myCalendar.createElement("tbody", tblDate);
        var row = myCalendar.createElement("tr", tbody);
        var cell = myCalendar.createElement("td", row);
        cell.appendChild(document.createTextNode("Year"));
        cell = myCalendar.createElement("td", row);
        cell.appendChild(document.createTextNode("Month"));
        cell = myCalendar.createElement("td", row);
        cell.appendChild(document.createTextNode("Day"));

        var objCtrl;
        row = myCalendar.createElement("tr", tbody);
        cell = myCalendar.createElement("td", row);

        objCtrl = myCalendar.createElement("INPUT");
        objCtrl.type='text';
        objCtrl.name= myCalendar.ControlId['yearText'];
        objCtrl.id=myCalendar.ControlId['yearText'];
        objCtrl.setAttribute("size", "4");
        objCtrl.setAttribute("maxLength", "4");
        objCtrl.setAttribute("autoComplete", "off");

        cell.appendChild(objCtrl);
        //year ddl start
        objCtrl = myCalendar.createElement("select");
        objCtrl.name=myCalendar.ControlId['yearDDL'];
        objCtrl.id=myCalendar.ControlId['yearDDL'];
        objCtrl.style.display='none';
        cell.appendChild(objCtrl);
        //year ddl end

        cell = myCalendar.createElement("td", row);
        objCtrl = myCalendar.createElement("select");
        objCtrl.name=myCalendar.ControlId['monthDDL'];
        objCtrl.id=myCalendar.ControlId['monthDDL'];
        cell.appendChild(objCtrl);

        cell = myCalendar.createElement("td", row);
        objCtrl = myCalendar.createElement("select");
        objCtrl.name=myCalendar.ControlId['dayDDL'];
        objCtrl.id=myCalendar.ControlId['dayDDL'];
        cell.appendChild(objCtrl);

        tblTime = myCalendar.createElement("table");
        tblTime.className = "calendarTable";
        tblTime.id=myCalendar.ControlId['tblTime'];
        tblTime.name=myCalendar.ControlId['tblTime'];

		myCalendar.setStyleAttribute(tblTime, "border-collapse:collapse");
        tblTime.border='1';

        tbody = myCalendar.createElement("tbody", tblTime);
        row = myCalendar.createElement("tr", tbody);
        cell = myCalendar.createElement("td", row);
        cell.appendChild(document.createTextNode("Hour"));
        cell = myCalendar.createElement("td", row);
        cell.appendChild(document.createTextNode("Minute"));
        cell = myCalendar.createElement("td", row);
        cell.id = myCalendar.ControlId['cellAmPm'];
        cell.name = myCalendar.ControlId['cellAmPm'];
        cell.appendChild(document.createTextNode("AM/PM"));

        row = myCalendar.createElement("tr", tbody);
        cell = myCalendar.createElement("td", row);
        objCtrl = myCalendar.createElement("select");
        objCtrl.name=myCalendar.ControlId['hourDDL'];
        objCtrl.id=myCalendar.ControlId['hourDDL'];
        cell.appendChild(objCtrl);

        cell = myCalendar.createElement("td", row);
        objCtrl = myCalendar.createElement("select");
        objCtrl.name=myCalendar.ControlId['minuteDDL'];
        objCtrl.id=myCalendar.ControlId['minuteDDL'];
        cell.appendChild(objCtrl);

//        cell = myCalendar.createElement("td", row);
//        objCtrl = myCalendar.createElement("<select name='ddl$Second#' id='ddl$Second#' onkeydown='myCalendar.onEscape();'>");
//        cell.appendChild(objCtrl);

        cell = myCalendar.createElement("td", row);
        cell.id = "cell$DayPartCtrl#";
        cell.name = "cell$DayPartCtrl#";
        objCtrl = myCalendar.createElement("select");
        objCtrl.name=myCalendar.ControlId['dayPartDDL'];
        objCtrl.id=myCalendar.ControlId['dayPartDDL'];
        cell.appendChild(objCtrl);

        //main table
        table = myCalendar.createElement("table");
        table.id='tbl$Calendar#';
        table.name='tbl$Calendar#';
		myCalendar.setStyleAttribute(table, "border-collapse:collapse");
        table.border='1';
        table.cellspacing=0;
        table.cellpadding=0;

        tbody = myCalendar.createElement("tbody", table);
        row = myCalendar.createElement("tr", tbody);
        cell = myCalendar.createElement("td", row);
        cell.rowSpan = 2;
        cell.appendChild(tblDate);

        cell = myCalendar.createElement("td", row);
        cell.rowSpan = 2;
        cell.appendChild(tblTime);

        cell = myCalendar.createElement("td", row);
        objCtrl=myCalendar.createElement("img");
        objCtrl.id=myCalendar.ControlId['imgCalendar'];
        objCtrl.name=myCalendar.ControlId['imgCalendar'];
        objCtrl.src= myCalendar.ImgPath['imgPopupCalendar'];
        objCtrl.title="Show/Hide Calendar";
        objCtrl.style.width="13px";
        objCtrl.style.height="11px";
        cell.appendChild(objCtrl);

        objCtrl=myCalendar.createElement("img");
        objCtrl.id="img$CalendarClose#";
        objCtrl.name="img$CalendarClose#";
        objCtrl.src=myCalendar.ImgPath['imgClose'];
        objCtrl.title="Close";
        objCtrl.style.width="13px";
        objCtrl.style.height="11px";
        cell.appendChild(objCtrl);

        row = myCalendar.createElement("tr", tbody);
        cell = myCalendar.createElement("td", row);
        objCtrl = myCalendar.createElement("input");
        objCtrl.type='button';
        objCtrl.name=myCalendar.ControlId['buttonSelect'];
        objCtrl.id=myCalendar.ControlId['buttonSelect'];
        objCtrl.value='go';
        objCtrl.className="calendarButton";
        cell.appendChild(objCtrl);

        row = myCalendar.createElement("tr", tbody);
        cell = myCalendar.createElement("td", row);
        cell.colSpan = 3;
        cell.id = myCalendar.ControlId['tdDisplay'];
        cell.name = myCalendar.ControlId['tdDisplay'];

        div.appendChild(table);
        objCtrl = document.getElementsByTagName("body")[0];
        if (objCtrl != null) {
			objCtrl.appendChild(div);
        }
        myCalendar.created=true;

        //start: event handler
        objCtrl = myCalendar.getYearCtrl('text');
        myCalendar.addEvent(objCtrl, 'keypress', myCalendar.validYearKeys);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.controlKeys4Year);
        myCalendar.addEvent(objCtrl, 'change', myCalendar.yearChanged);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.keyDownHandler);
        myCalendar.addEvent(objCtrl, 'keyup', myCalendar.refreshScrollCalendar);

        objCtrl = myCalendar.getYearCtrl('ddl');
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);
        myCalendar.addEvent(objCtrl, 'change', myCalendar.yearChanged);
        myCalendar.addEvent(objCtrl, 'change', myCalendar.refreshScrollCalendar);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.keyDownHandler);

        objCtrl = myCalendar.getMonthCtrl();
        myCalendar.addEvent(objCtrl, 'change', myCalendar.monthChanged);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);
        myCalendar.addEvent(objCtrl, 'change', myCalendar.refreshScrollCalendar);

        objCtrl = myCalendar.getDayCtrl();
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);

        objCtrl = myCalendar.getHourCtrl();
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.keyDownHandler);

        objCtrl = myCalendar.getMinuteCtrl();
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);

        objCtrl = myCalendar.getDayPartCtrl();
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.onEscape);

        objCtrl = myCalendar.getElementById('img$CalendarClose#');
        myCalendar.addEvent(objCtrl, 'click', myCalendar.actionHide);

        objCtrl = myCalendar.getElementById('btn$Select#');
        myCalendar.addEvent(objCtrl, 'click', myCalendar.dateSelectComplete);
        myCalendar.addEvent(objCtrl, 'keydown', myCalendar.keyDownHandler);

        objCtrl = myCalendar.getElementById(myCalendar.ControlId['imgCalendar']);
        myCalendar.addEvent(objCtrl, 'click', myCalendar.showCalendar);
        //end: event handler
    }
}

myCalendar.setDate = function(obj) {
    var _value=myCalendar.getClientDateCtrl().value;    
    var date$, _stemp;
    var x$, aData, _counter;

	myCalendar.reset(); //reset controls in calendar
    _value=myCalendar.trimChar(_value, '  ', ' ');
    if (_value != "") {
        date$ = myCalendar.parseDate(_value);
        aData = myCalendar.getFormat();
        //year
        for(_counter=0; _counter<aData.length;_counter++) {
            if(aData[_counter]=="yyyy") {
                if (date$['yyyy']!='') {
                    x$ = myCalendar.getYearCtrl();
                    x$.value = date$['yyyy'];
                }
                break;
            }
        }
        //month
        for(_counter=0; _counter<aData.length;_counter++) {
            if(aData[_counter]=="MMM" || aData[_counter]=="MM") {
                if (date$['MMM']!='') {
                    x$ = myCalendar.getMonthCtrl();
                    x$.selectedIndex=0;	//reset to blank
                    for(i=0; i< x$.length; i++) {
                        if (x$.options[i].value.toLowerCase()== date$['MMM'].toString().toLowerCase()) {
                            x$.selectedIndex = i;
                            break;
                        }
                    }
                    myCalendar.monthChanged();
                }
                break;
            }
        }
        for(_counter=0; _counter<aData.length;_counter++) {
            if (aData[_counter]=="dd") {
                if (date$['dd'] != "") {
                    x$ = myCalendar.getDayCtrl();
                    x$.selectedIndex=0; //reset to blank
                    for(i=0; i< x$.length; i++) {
                        if (x$.options[i].value==date$['dd']) {
                            x$.selectedIndex = i;
                            break;
                        }
                    }
                }
            }
            else if(aData[_counter]=="hh") {
                if (date$['hh']!='') {
                    _stemp = myCalendar.padRight(date$['hh'], 2, '0');
                    x$ = myCalendar.getHourCtrl();
                    for(i=0; i< x$.length; i++) {
                        if (x$.options[i].value==_stemp) {
                            x$.selectedIndex = i;
                            break;
                        }
                    }
                }
            }
            else if(aData[_counter]=="mm") {
                if (date$['mm']!='') {
                    _stemp = myCalendar.padRight(date$['mm'], 2, '0');
                    x$ = myCalendar.getMinuteCtrl();
                    for(i=0; i< x$.length; i++) {
                        if (x$.options[i].value==_stemp) {
                            x$.selectedIndex = i;
                            break;
                        }
                    }
                }
            }
            else if(aData[_counter]=="ss") {
                if (date$['ss']!='') {
                    _stemp = myCalendar.padRight(date$['ss'], 2, '0');
                    x$ = myCalendar.getSecondCtrl();
                    for(i=0; i< x$.length; i++) {
                        if (x$.options[i].value==_stemp) {
                            x$.selectedIndex = i;
                            break;
                        }
                    }
                }
            }
            else if(aData[_counter]=="ampm") {
                x$ = myCalendar.getDayPartCtrl();
                for(i=0; i< x$.length; i++) {
                    if (x$.options[i].value.toLowerCase()== date$['ampm'].toLowerCase()) {
                        x$.selectedIndex = i;
                        break;
                    }
                }
            }
        }
    }
    else {
        myCalendar.getDayCtrl().selectedIndex = 0;
        myCalendar.getMonthCtrl().selectedIndex = 0;
        myCalendar.getYearCtrl().value="";

        myCalendar.getHourCtrl().selectedIndex = 0;
        myCalendar.getMinuteCtrl().selectedIndex = 0;
        myCalendar.getDayPartCtrl().selectedIndex = 0;
    }
}

myCalendar.positionSelf = function() {
    var objDiv = myCalendar.getCalendarCtrl();
    var p = myCalendar.getAbsolutePos(myCalendar.getElementById(myCalendar.eventTriggeredBy));
    var _newpos;
    try {
		var _pct = document.body.offsetWidth*75/100;
		if (p.x >= _pct) {
			_newpos = myCalendar.getElementById(myCalendar.eventTriggeredBy).offsetWidth + p.x - objDiv.offsetWidth;
			if (_newpos>0) {
				objDiv.style.left = _newpos + "px";
				objDiv.style.top = p.y + "px";
			}
			else {
				objDiv.style.left = p.x + "px";
				objDiv.style.top = p.y + "px";
			}
		}
		else {
			objDiv.style.left = p.x + "px";
			objDiv.style.top = p.y + "px";
		}
	}
	catch(e) {
		objDiv.style.left = p.x + "px";
		objDiv.style.top = p.y + "px";
	}
}

myCalendar.getAbsolutePos = function(el) {
	var SL = 0, ST = 0;
	var is_div = /^div$/i.test(el.tagName);
	if (is_div && el.scrollLeft)
		SL = el.scrollLeft;
	if (is_div && el.scrollTop)
		ST = el.scrollTop;
	var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
	if (el.offsetParent) {
		var tmp = myCalendar.getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
}

myCalendar.onEscape = function(obj) {
	var _keyCode;
	_keyCode = myCalendar.getKeyCode(obj);
    if (_keyCode==27) {
        myCalendar.actionHide();
    }
}

myCalendar.getElementById = function(obj) {
	var _obj;
	_obj = document.getElementById(obj);
	if (_obj == null) {
		_obj = document.getElementsByName(obj)[0];
	}
    return _obj;
}

myCalendar.setParameter = function(param) {
    function param_default(pname, def) { if (typeof param[pname] == "undefined") { param[pname] = def; }};

    param_default("inputField",     null);
    param_default("button",         null);
    param_default("readOnly",   false);
    param_default("includeTime",   false);
    param_default("timeFormat",   "12");
    param_default("includeSeconds",   true);
    param_default("mode",   "date");
    param_default("dateTimeSeperator",   " ");
    param_default("timeSeperator",   ":");
    param_default("onSelectionCompleteCallBack", null);
    param_default("yearStart",   0);
    param_default("yearEnd",     0);
    param_default("showDayCalendar",     true);
    param_default("accessKey",     false);
    param_default("dateSeperator",     "-");
    param_default("dateFormat",     0);
    param_default("allowDeleteButton",     true);
        
    if (param['button'] == null || param['inputField'] == null) {
        alert('Nothing to setup.');
        return false;
    }
    else {
        var _calendarParameter;
        if (typeof myCalendar.ctrlRef[param['button']] == "undefined") {
            myCalendar.ctrlRef[param['button']] = new Array();
        }
        myCalendar.ctrlRef[param['button']] ['inputField'] = param['inputField'];
        myCalendar.ctrlRef[param['button']] ['includeTime'] = param['includeTime'];
        myCalendar.ctrlRef[param['button']] ['timeFormat'] = param['timeFormat'];
        myCalendar.ctrlRef[param['button']] ['includeSeconds'] = param['includeSeconds'];
        myCalendar.ctrlRef[param['button']] ['mode'] = param['mode'];
        myCalendar.ctrlRef[param['button']] ['onSelectionCompleteCallBack'] = param['onSelectionCompleteCallBack'];
        myCalendar.ctrlRef[param['button']] ['dateTimeSeperator'] = param['dateTimeSeperator'];
        myCalendar.ctrlRef[param['button']] ['timeSeperator'] = param['timeSeperator'];
        myCalendar.ctrlRef[param['button']] ['yearStart'] = param['yearStart']+'';
        myCalendar.ctrlRef[param['button']] ['yearEnd'] = param['yearEnd']+'';
        myCalendar.ctrlRef[param['button']] ['showDayCalendar'] = param['showDayCalendar'];
        myCalendar.ctrlRef[param['button']] ['accessKey'] = param['accessKey'];
        myCalendar.ctrlRef[param['button']] ['dateSeperator'] = param['dateSeperator']+'';
        
        myCalendar.ctrlRef[param['button']] ['dateFormat'] = param['dateFormat'];
        myCalendar.ctrlRef[param['button']] ['dateFormat_i'] = 0;
        
        myCalendar.ctrlRef[param['button']] ['allowDeleteButton'] = param['allowDeleteButton'];

        if (param['readOnly']) {
            myCalendar.getElementById(param['inputField']).readOnly = true;
        }
        if (param['yearStart']!=0 && param['yearEnd']!=0) {
            if (myCalendar.ctrlRef[param['button']] ['yearStart'] > 0 &&
                    myCalendar.ctrlRef[param['button']] ['yearEnd'] > 0) {
                myCalendar.ctrlRef[param['button']] ['isYearddl'] = true;
            }
        }
        
        myCalendar.addEvent(myCalendar.getElementById(param['inputField']), "keydown", myCalendar.keyDown_Input);
        
        if (param['dateFormat'] != 0) {
			myCalendar.ctrlRef[param['button']] ['isDateFormatSet'] = true;
        }
        else {
			myCalendar.ctrlRef[param['button']] ['isDateFormatSet'] = false;
        }
    }
}

myCalendar.getParameterValue = function(para) {
    return myCalendar.ctrlRef[myCalendar.eventTriggeredBy][para];
}

myCalendar.padRight = function(sourceString, length, padCharacter) {
    var objtempString;
    objtempString = sourceString.toString();
    while(objtempString.length < length) {
        objtempString  = padCharacter + objtempString;
    }
    return objtempString;
}

myCalendar.prepareForDisplay = function(obj) {
    if (myCalendar.getParameterValue('mode')=="time") {
        myCalendar.getTimeCtrl().style.display="block";
        myCalendar.getDateCtrl().style.display="none";
        if (myCalendar.getParameterValue('timeFormat')=="24") {
            myCalendar.getCellDayPartText().style.display="none";
            myCalendar.getCellDayPartCtrl().style.display="none";
        }
        else {
            myCalendar.getCellDayPartText().style.display="block";
            myCalendar.getCellDayPartCtrl().style.display="block";
        }
        myCalendar.getElementById(myCalendar.ControlId['imgCalendar']).style.visibility="hidden";
        myCalendar.tabControls['startCtrl']= myCalendar.ControlId['hourDDL'];
    }
    else {
        myCalendar.getDateCtrl().style.display="block";
        if (myCalendar.getParameterValue('includeTime')) {
            myCalendar.getTimeCtrl().style.display="block";
        }
        else {
            myCalendar.getTimeCtrl().style.display="none";
        }
        if (myCalendar.getParameterValue('timeFormat')=="24") {
            myCalendar.getCellDayPartText().style.display="none";
            myCalendar.getCellDayPartCtrl().style.display="none";
        }
        else {
            myCalendar.getCellDayPartText().style.display="block";
            myCalendar.getCellDayPartCtrl().style.display="block";
        }
        myCalendar.getElementById(myCalendar.ControlId['imgCalendar']).style.visibility="visible";
    }
}

myCalendar.getFormat = function(obj) {
    var _picture = new Array();
    var _pictureCount=0;
    if (myCalendar.getParameterValue('mode')=="time") {
        _picture[_pictureCount++]="hh";
        _picture[_pictureCount++]="mm";
        if (myCalendar.getParameterValue('includeSeconds')) {
            //_picture[_pictureCount++]="ss";
        }
        if (myCalendar.getParameterValue('timeFormat')=="12") {
            _picture[_pictureCount++]="ampm";
        }
    }
    else {
		var iFormat = myCalendar.getParameterValue('dateFormat');
		if (iFormat == 0) {
			iFormat = myCalendar.getParameterValue('dateFormat_i');
			if (iFormat == 0) {
				iFormat = myCalendar.DF_DDMMMYYYY;
			}
		}
		if (iFormat == myCalendar.DF_DDMMYYYY) {
			_picture[_pictureCount++] = "dd";
			_picture[_pictureCount++] = "MM";
			_picture[_pictureCount++] = "yyyy";		
		}
		else if (iFormat == myCalendar.DF_MMDDYYYY) {
			_picture[_pictureCount++] = "MM";
			_picture[_pictureCount++] = "dd";
			_picture[_pictureCount++] = "yyyy";		
		}
		else if (iFormat == myCalendar.DF_DDMMMYYYY) {
			_picture[_pictureCount++] = "dd";
			_picture[_pictureCount++] = "MMM";
			_picture[_pictureCount++] = "yyyy";
		}
		else if (iFormat == myCalendar.DF_YYYYMMDD) {
			_picture[_pictureCount++] = "yyyy";
			_picture[_pictureCount++] = "MM";
			_picture[_pictureCount++] = "dd";
		}
        
        if (myCalendar.getParameterValue('includeTime')) {
            _picture[_pictureCount++]="hh";
            _picture[_pictureCount++]="mm";
            if (myCalendar.getParameterValue('includeSeconds')) {
                //_picture[_pictureCount++]="ss";
            }
            if (myCalendar.getParameterValue('timeFormat')=="12") {
                _picture[_pictureCount++]="ampm";
            }
        }
    }
    return _picture;
}

myCalendar.trimChar = function(srcString, findChar, replaceChar) {
    while(srcString.indexOf(findChar) >0) {
        srcString = srcString.replace(findChar, replaceChar);
    }
    return srcString;
}

myCalendar.resolveSeperator = function(sDate) {
    var _nCount=0;
    var _seperator;
    if (sDate.indexOf('-')>0) {
        _seperator = '-';
        _nCount++;
    }
    if (sDate.indexOf('/')>0) {
        _seperator = '/';
        _nCount++;
    }
    if (sDate.indexOf('\\')>0) {
        _seperator = '\\';
        _nCount++;
    }
    if (sDate.indexOf('.')>0) {
        _seperator = '.';
        _nCount++;
    }
    if (_nCount!=1) {
        _seperator="";  //could not resolve seperator
    }
    return _seperator;
}

myCalendar.parseDate = function(sValue) {
    var _seperator;
    var _sDate, _sTime, _sDayPart='';
    var aData, date$;
    var iFormat;
    if (myCalendar.getParameterValue('mode')=="time") {
        _sTime = sValue.split(' ')[0];
        _sDayPart = sValue.split(' ')[1];
        if (typeof _sDayPart == "undefined") _sDayPart = '';
    }
    else {
        _sDate = sValue.split(' ')[0];
        _sTime = sValue.split(' ')[1];
        _sDayPart = sValue.split(' ')[2];
        if (typeof _sDayPart == "undefined") _sDayPart = '';
    }
    _seperator = myCalendar.resolveSeperator(sValue);
    date$ = new Array();
    if (_seperator!="") {
        if (typeof _sDate != "undefined") {
            aData = _sDate.split(_seperator);
            iFormat = myCalendar.getParameterValue('dateFormat');
            if (iFormat != 0) {
				if (!myCalendar.getFormatValidity(_sDate, iFormat)) {
					iFormat = myCalendar.probeDateFormat(_sDate);
					myCalendar.ctrlRef[myCalendar.eventTriggeredBy]['dateFormat_i'] = iFormat;
				}				
            }
            else {
				iFormat = myCalendar.probeDateFormat(_sDate);
				myCalendar.ctrlRef[myCalendar.eventTriggeredBy]['dateFormat_i'] = iFormat;
            }
            if (iFormat == myCalendar.DF_DDMMYYYY) {
				date$['dd']=parseFloat(aData[0]);
				date$['MM']= parseFloat(aData[1]);
				date$['yyyy']=aData[2];
				date$['MMM']=myCalendar.MonthName[date$['MM']-1];
            }
            else if (iFormat == myCalendar.DF_MMDDYYYY) {
				date$['MM']= parseFloat(aData[0]);
				date$['dd']=parseFloat(aData[1]);
				date$['yyyy']=aData[2];
				date$['MMM']=myCalendar.MonthName[date$['MM']-1];
            }
            else if (iFormat == myCalendar.DF_DDMMMYYYY) {
				date$['dd']=parseFloat(aData[0]);
				date$['MMM']=aData[1];
				date$['yyyy']=aData[2];
				date$['MM']= myCalendar.getMonthInNumber(date$['MMM']);
            }
            else if (iFormat == myCalendar.DF_YYYYMMDD) {
				date$['yyyy']=aData[0];
				date$['MM']= parseFloat(aData[1]);
				date$['dd']=parseFloat(aData[2]);
				date$['MMM']=myCalendar.MonthName[date$['MM']-1];
            }
            else {
				date$['dd']="";  date$['MMM']=""; date$['yyyy']="";date$['MM']="";
            }
        }
        else {
            date$['dd']="";  date$['MMM']=""; date$['yyyy']="";date$['MM']="";
        }
    }
    else {
        date$['dd']="";  date$['MMM']=""; date$['yyyy']="";date$['MM']='';
    }

    if (typeof _sTime != "undefined") {
        aData = _sTime.split(':');
        if (aData.length > 1) {	//length should be greater than 1
			//start validate time
			var _vfHH, _vfMM, _vfTimeFormat, _vfDayPart;
			_vfHH = parseFloat(aData[0]+"");
			_vfMM = aData[1]+"";
			_vfTimeFormat = myCalendar.getParameterValue('timeFormat');

			if (_sDayPart.length == 0) {	// 24 hrs format
				if (myCalendar.validTime(_vfHH, _vfMM, 24) == true) {
					if (_vfTimeFormat == 12) {
						if (_vfHH == 0) {
							_vfHH = 12;
							_vfDayPart = 'AM';
						}
						else if (_vfHH > 12) {
							_vfHH -= 12;
							_vfDayPart = 'PM';
						}
						else {
							_vfDayPart = 'AM';
						}
					}
				}
				else {
					_vfHH = ''; _vfMM = ''; _vfDayPart = '';
				}
			}
			else {	// 12 hrs				
				if (myCalendar.validTime(_vfHH, _vfMM, 12) == true) {
					if (_vfTimeFormat == 24) {
						if (_vfHH == 12 && _sDayPart.toLowerCase() == 'am') {
							_vfHH = 0;
							_vfDayPart = '';
						}
						else if (_vfHH != 12 && _sDayPart.toLowerCase() == 'pm') {
							_vfHH += 12;
							_vfDayPart = '';
						}
						else {
							_vfDayPart = '';							
						}
					}
					else {
						_vfDayPart = _sDayPart;
					}
				}
				else {
					_vfHH = ''; _vfMM = ''; _vfDayPart = '';
				}
			}
			//end validate time
            //date$['hh']=aData[0]+"";    date$['mm']=aData[1]+"";    date$['ss']=aData[2]+"";
            //date$['ampm'] = _sDayPart;
            date$['hh']= _vfHH+"";    date$['mm']=_vfMM+"";    /*date$['ss']=aData[2]+"";*/
            date$['ampm'] = _vfDayPart;
        }
        else {
            date$['hh']="";    date$['mm']="";    date$['ss']="";
            date$['ampm'] ="";
        }
    }
    else {
        date$['hh']="";    date$['mm']="";    date$['ss']="";
        date$['ampm'] ="";
    }
    return date$;
}

myCalendar.addEvent = function(el, eventName, eventHandler) {
    var _retVal=false;
    if (el.addEventListener) {
        _retVal = el.addEventListener(eventName, eventHandler, false);
    }
    else if (el.attachEvent) {
        _retVal = el.attachEvent('on'+eventName, eventHandler);
    }
    return _retVal;
}

myCalendar.removeEvent = function(el, eventName, eventHandler) {
    var _retVal=false;
    if (el.addEventListener) {
        _retVal = el.removeEventListener(eventName, eventHandler, false);
    }
    else if (el.attachEvent) {
        _retVal = el.detachEvent('on'+eventName, eventHandler);
    }
    return _retVal;
}

myCalendar.hideShowCovered = function() {
    var tags = new Array("applet", "iframe", "select");
	var el = myCalendar.getCalendarCtrl();

	var p = myCalendar.getAbsolutePos(el);
	var SX1 = p.x;
	var SX2 = el.offsetWidth + SX1;
	var SY1 = p.y;
	var SY2 = el.offsetHeight + SY1;

	for (var k = tags.length; k > 0; ) {
		var ar = document.getElementsByTagName(tags[--k]);
		var cc = null;

		for (var i = ar.length; i > 0;) {
			cc = ar[--i];

			p = myCalendar.getAbsolutePos(cc);
			var CX1 = p.x;
			var CX2 = cc.offsetWidth + CX1;
			var CY1 = p.y;
			var CY2 = cc.offsetHeight + CY1;

			if (cc.id.toString().indexOf('$')!=-1 && cc.id.toString().indexOf('#')!=-1) {
			    continue;
			}
			if ( myCalendar.isHidden && (
                ( CY1 >= SY1 && CY1 <= SY2 && CX1 >= SX1 && CX1 <= SX2 ) ||
                ( CY2 >= SY1 && CY2 <= SY2 && CX1 >= SX1 && CX1 <= SX2 ) ||
                ( CX2 >= SX1 && CX2 <= SX2 && CY1 >= SY1 && CY1 <= SY2 ) ||
                ( CY2 >= SY1 && CY2 <= SY2 && CX2 >= SX1 && CX2 <= SX2 )
                )
			) {
				if (!cc.__msh_save_visibility) {
					cc.__msh_save_visibility = myCalendar.getVisibility(cc);
				}
				cc.style.visibility = "hidden";
			}
			else {
				if (!cc.__msh_save_visibility) {
					cc.__msh_save_visibility = myCalendar.getVisibility(cc);
				}
				cc.style.visibility = cc.__msh_save_visibility;
			}
		}
	}
}

myCalendar.getVisibility = function (obj) {
	var value = obj.style.visibility;
	if (!value) {
		if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") {
			value = '';
		} else if (obj.currentStyle) { // IE
			value = obj.currentStyle.visibility;
		} else
			value = '';
	}
	return value;
}

myCalendar.keyDownHandler = function(obj) {
	var _keyCode;
	_keyCode = myCalendar.getKeyCode(obj);
    if (_keyCode==9) {
		var _shiftKey = myCalendar.browser=="ie" ? event.shiftKey : obj.shiftKey;
		var _Ctrl = myCalendar.eventRaisedBy(obj);
        if (_shiftKey) {
			if (_Ctrl == myCalendar.tabControls['startCtrl']) {
				myCalendar.getElementById(myCalendar.tabControls['endCtrl']).focus();
				return myCalendar.cancelEvent(obj);
			}
        }
        else {
			if (_Ctrl == myCalendar.tabControls['endCtrl']) {
				myCalendar.getElementById(myCalendar.tabControls['startCtrl']).focus();
				return myCalendar.cancelEvent(obj);
			}
        }
    }
}

myCalendar.eventRaisedBy = function(obj) {
	var _id;
	if (myCalendar.browser=="ie") {
		_id = window.event.srcElement.id;
		if (_id == '') {
			_id = window.event.srcElement.name;
		}
	}
	else {
		_id = obj.target.id;
	}
	return _id;
}

myCalendar.getBrowserInfo = function() {
	if (navigator.appName=="Microsoft Internet Explorer") {
		myCalendar.browser="ie";
	}
	else if (navigator.appName=="Opera") {
		myCalendar.browser="opera";
	}
	else if (navigator.appName=="Netscape") {
		myCalendar.browser="ns";
	}
}

myCalendar.setStyleAttribute = function(el, style) {
	if (myCalendar.browser=="ie") {
		el.style.setAttribute("cssText", style);
	}
	else {
		el.setAttribute("style", style);
	}
}

myCalendar.getKeyCode = function(obj) {
	if (myCalendar.browser=="ie") {
		return event.keyCode;
	}
	else {
		return obj.which;
	}
}

myCalendar.clearCalendarDisplay = function() {
	myCalendar.getElementById(myCalendar.ControlId['tdDisplay']).innerHTML = "";
}

myCalendar.showCalendar = function(obj) {
	if (!myCalendar.isCalendarVisible) {
		myCalendar.hideShowCovered();
		myCalendar.isHidden=true;
		myCalendar.showDayCalendar(myCalendar.getYear(), myCalendar.getMonthInNumber());
		myCalendar.isCalendarVisible=true;
		myCalendar.hideShowCovered();
		myCalendar.isHidden=false;
	}
	else {
		myCalendar.hideShowCovered();
		myCalendar.isHidden=true;
		myCalendar.isCalendarVisible=false;
		myCalendar.getElementById(myCalendar.ControlId['tdDisplay']).innerHTML = "";
		myCalendar.hideShowCovered();
		myCalendar.isHidden=false;
	}
}

myCalendar.showDayCalendar = function(year, mth) {
	var weekday;
	var nDay, nTotalDays, firstWeek;
	var nlastDay;
	var sCal;
	var isCurrent = false;	

	//d = 1;
	if (mth=="")  mth = (new Date).getMonth()+1;
	if (year=="") year = (new Date).getFullYear();
	myCalendar.storedValues['year'] = year;
	myCalendar.storedValues['month'] = mth;
	
	if (myCalendar.currentMonth == mth && myCalendar.currentYear == year) {
		isCurrent = true;
	}
	
	nlastDay = myCalendar.Days_In_Month[mth-1];
	if (mth==2 && myCalendar.isLeapYear(year, mth)) {
		nlastDay = 29;
	}
	weekday = (new Date(year, mth-1, 1)).getDay();
	sCal = "<table class='calendarDisplay' border=1 width='100%' valign='top'>";

	sCal += "<tr><td colspan='7' align='center' style='border:none'>";
	sCal += "<table class='calendarDisplayHead' border='0' cellspacing='0' cellpadding='0' valign='center' width='100%'><tr>"+
			"<td align='right' style='border:none'><img src='" + myCalendar.ImgPath['imgScrollLeft'] + "' style='width:8px;height:12px;' onclick='myCalendar.scrollMonth(-1);'>&nbsp;" + myCalendar.MonthName[mth-1] +
			"&nbsp;<img src='" + myCalendar.ImgPath['imgScrollRight'] + "' style='width:8px;height:12px;' onclick='myCalendar.scrollMonth(1);'>&nbsp;&nbsp;</td>" +
			"<td align='left' style='border:none'>&nbsp;&nbsp;<img src='" + myCalendar.ImgPath['imgScrollLeft'] + "' style='width:8px;height:12px;' onclick='myCalendar.scrollYear(-1);'>&nbsp;" + year +
			"&nbsp;<img src='" + myCalendar.ImgPath['imgScrollRight'] + "' style='width:8px;height:12px;' onclick='myCalendar.scrollYear(1);'></td>" +
			"</tr></table>";

	sCal +=  "</td></tr>";
	sCal += "<tr>";
	for(var i=0; i<myCalendar.weekdays.length; i++) {
		sCal += "<td align='center' width='25px'>" + myCalendar.weekdays[i] + "</td>";
	}
	sCal += "</tr>"	
	for(nDay=1,firstWeek=true; nDay <= nlastDay;) {
		sCal += "<tr>";
		if (firstWeek) {			
			if (weekday != 0) {
				j = weekday;
				for(x=1; x<=j; x++) {
					sCal += "<td>&nbsp;</td>";
				}
				j++;				
			}
			else {
				j = 1;
			}
			firstWeek = false;
		}
		else {
			j=1;
		}		
		for(; j <= 7 && nDay<=nlastDay; j++, nDay++) {
			if (isCurrent && nDay == myCalendar.currentDay) {
				sCal += "<td class='currentDate' id='cell$" + nDay + "#' align='center' onclick='myCalendar.daySelected("+ nDay + ")' onmouseover='myCalendar.scrollCalendarMOver(event);' onmouseout='myCalendar.scrollCalendarMOut(event);'>" + nDay + "</td>";
			}
			else {
				sCal += "<td id='cell$" + nDay + "#' align='center' onclick='myCalendar.daySelected("+ nDay + ")' onmouseover='myCalendar.scrollCalendarMOver(event);' onmouseout='myCalendar.scrollCalendarMOut(event);'>" + nDay + "</td>";
			}
		}
		if (nDay > myCalendar.Days_In_Month[mth-1]) {
			for(x=j; x<=7; x++) {
				sCal += "<td>&nbsp;</td>"
			}
		}
		sCal += "</tr>";
	}
	myCalendar.getElementById(myCalendar.ControlId['tdDisplay']).innerHTML = sCal;
}

myCalendar.scrollYear = function(no) {
	var nYear;
	if (myCalendar.validScrollYear(parseFloat(myCalendar.storedValues['year']), no)) {
		nYear = parseFloat(myCalendar.storedValues['year']) + no;
		myCalendar.storedValues['year'] = nYear;
		myCalendar.showDayCalendar(nYear, myCalendar.storedValues['month']);
	}
}

myCalendar.scrollMonth = function(no) {
	var nMonth;
	nMonth = myCalendar.storedValues['month'] + no;
	if (nMonth>12) {
		if (myCalendar.validScrollYear(parseFloat(myCalendar.storedValues['year']), 1)) {
			nMonth=1;
			myCalendar.storedValues['year']++;
		}
		else {
			return;
		}
	}
	if (nMonth<1) {
		if (myCalendar.validScrollYear(parseFloat(myCalendar.storedValues['year']), -1)) {
			nMonth=12;
			myCalendar.storedValues['year']--;
		}
		else {
			return;
		}
	}
	myCalendar.storedValues['month'] = nMonth;
	myCalendar.showDayCalendar(myCalendar.storedValues['year'], nMonth);
}

myCalendar.daySelected = function(day) {
	myCalendar.getYearCtrl().value=myCalendar.storedValues['year'];
	myCalendar.getMonthCtrl().selectedIndex=myCalendar.storedValues['month'];
	myCalendar.monthChanged();
	myCalendar.getDayCtrl().value=day;
}

myCalendar.refreshScrollCalendar = function(obj) {
	if (myCalendar.getParameterValue('showDayCalendar') || myCalendar.isCalendarVisible) {
		var _yr, _mth;
		_yr=myCalendar.getYear();
		_mth=myCalendar.getMonth();
		if (_yr != '' && _mth != '' && _yr.length==4) {
			myCalendar.showDayCalendar(myCalendar.getYear(), myCalendar.getMonthInNumber());
		}
	}
}

myCalendar.validScrollYear = function(nYear, no) {
	if (myCalendar.getParameterValue('yearStart') > 0 && myCalendar.getParameterValue('yearEnd') > 0) {
		if (no > 0) {
			if (nYear+no <= myCalendar.getParameterValue('yearEnd')) {
				return true;
			}
			else {
				return false;
			}
		}
		else {
			if (nYear+no >= myCalendar.getParameterValue('yearStart')) {
				return true;
			}
			else {
				return false;
			}
		}
	}
	else {
		return true;
	}
}

myCalendar.actionLostFocus = function(obj) {
	var el = myCalendar.getCalendarCtrl();
	var p = myCalendar.getAbsolutePos(el);
	var SX1 = p.x;
	var SX2 = el.offsetWidth + SX1;
	var SY1 = p.y;
	var SY2 = el.offsetHeight + SY1;
	if ( (myCalendar.mousePos.x >= SX1 && myCalendar.mousePos.x <= SX2) && (myCalendar.mousePos.y >= SY1 && myCalendar.mousePos.y <= SY2) ) {
	}
    else {
		myCalendar.actionHide();
	}
}

myCalendar.getMousePos = function (evt) {
	var r = { x: 0, y: 0};
	if (!evt)
		evt = window.event;
	if (evt.pageX) {
		r.x = evt.pageX;
		r.y = evt.pageY;
	}
	else if (evt.clientX) {
		r.x = evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);
		r.y = evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
	}
	return r;
}

myCalendar.accessKeyPressed = function(obj) {
	var _keyCode = myCalendar.getKeyCode(obj);
		var btnObject = myCalendar.getElementById(myCalendar.getButtonFromInput(myCalendar.eventRaisedBy(obj)));
		if (myCalendar.browser=="ie") {
			btnObject.click();
		}
		else {
			try {
				var eventObj = document.createEvent('MouseEvents');
				eventObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
				btnObject.dispatchEvent(eventObj);
			}
			catch(e) {
			}
		}
}

myCalendar.getButtonFromInput = function(inputCtrlName) {
	for(var _var in myCalendar.ctrlRef) {
		if (myCalendar.ctrlRef[_var]['inputField'] == inputCtrlName) {
			return _var.toString();
		}
	}
}

myCalendar.cancelEvent = function(obj) {
	if (myCalendar.browser=="ns") {
		obj.preventDefault();
		obj.stopPropagation();
	}
	else {
	    event.cancelBubble = true;
		event.returnValue = false;
	}
	return false;
}

myCalendar.handleMouseMove = function(obj) {
	var mp = myCalendar.getMousePos(obj);
	myCalendar.mousePos.x = mp.x;
	myCalendar.mousePos.y = mp.y;

	if (myCalendar.hTimer != 0) {
		window.clearTimeout(myCalendar.hTimer);
		myCalendar.hTimer = window.setTimeout('myCalendar.actionLostFocus()', myCalendar.AUTO_CLOSE_TIMEOUT);
	}
}

myCalendar.refresh = function(obj) {
    /*
	var divCal = myCalendar.getCalendarCtrl();
	var _styleDisplay = divCal.style.display;
	divCal.style.display = "none";
	divCal.style.display = _styleDisplay;
	*/
	//myCalendar.getMonthCtrl().execCommand("Refresh");
	//document.execCommand("Refresh");
}

myCalendar.clearList = function(obj) {
	if (myCalendar.browser=="opera") {
		for(var _temp=obj.length; _temp>=0; _temp--) {
			obj.options[_temp] = null;
		}
	}
	else {
		obj.length=0;
	}
}

myCalendar.reset = function(obj) {
	myCalendar.getYearCtrl('text').value='';
	myCalendar.getYearCtrl('ddl').selectedIndex=0;
	myCalendar.getMonthCtrl().selectedIndex=0;
	myCalendar.getDayCtrl().selectedIndex=0;
	myCalendar.getHourCtrl().selectedIndex=0;
	myCalendar.getMinuteCtrl().selectedIndex=0;
	myCalendar.getDayPartCtrl().selectedIndex=0;
}

myCalendar.addClass = function(el, className) {
	myCalendar.removeClass(el, className);
	el.className += " " + className;
}

myCalendar.removeClass = function(el, className) {
	if (!(el && el.className)) {
		return;
	}
	var cls = el.className.split(" ");
	var ar = new Array();
	for (var i = cls.length; i > 0;) {
		if (cls[--i] != className) {
			ar[ar.length] = cls[i];
		}
	}
	el.className = ar.join(" ");
}

myCalendar.scrollCalendarMOver = function(obj) {
    var el = myCalendar.getElementById(myCalendar.eventRaisedBy(obj));
    myCalendar.addClass(el, "hower");
}

myCalendar.scrollCalendarMOut = function(obj) {
    var el = myCalendar.getElementById(myCalendar.eventRaisedBy(obj));
    myCalendar.removeClass(el, "hower");
    myCalendar.cancelEvent(obj);
}

myCalendar.probeDateFormat = function(sDate) {
//	var datePat1 = /^(\d{1,2})(\/|\-)(\d{1,2})(\/|\-)(\d{4})$/;
//	var datePat2 = /^(\d{1,2})(\/|\-)(\S{3})(\/|\-)(\d{4})$/;
//	var datePat3 = /^(\d{4})(\/|\-)(\d{1,2})(\/|\-)(\d{1,2})$/;

	if (myCalendar.getFormatValidity(sDate, myCalendar.DF_DDMMYYYY)) {
		return myCalendar.DF_DDMMYYYY;
	}
	else if (myCalendar.getFormatValidity(sDate, myCalendar.DF_MMDDYYYY)) {
		return myCalendar.DF_MMDDYYYY;
	}
	else if (myCalendar.getFormatValidity(sDate, myCalendar.DF_DDMMMYYYY)) {
		return myCalendar.DF_DDMMMYYYY;
	}
	else if (myCalendar.getFormatValidity(sDate, myCalendar.DF_YYYYMMDD)) {
		return myCalendar.DF_YYYYMMDD;
	}
	return 0;
}

myCalendar.getFormatValidity = function(sDate, iFormat) {
	var datestatus=true;
	var iday, iMonth, iYear;
	var matchArray;
	
	matchArray = sDate.match(myCalendar.datePatterns[iFormat]);
	if(matchArray != null && matchArray[1]!=null && matchArray[3]!=null && matchArray[5]!=null) {
		if (iFormat == myCalendar.DF_DDMMYYYY) {
			iday = matchArray[1];
			iMonth = matchArray[3];
			iYear = matchArray[5];
		}
		else if (iFormat == myCalendar.DF_MMDDYYYY) {			
			iday = matchArray[3];
			iMonth = matchArray[1];
			iYear = matchArray[5];
			
		}
		else if (iFormat == myCalendar.DF_DDMMMYYYY) {
			iday = matchArray[1];
			iMonth = myCalendar.getMonthInNumber(matchArray[3]);
			iYear = matchArray[5];
		}
		else if (iFormat == myCalendar.DF_YYYYMMDD) {
			iday = matchArray[5];
			iMonth = matchArray[3];
			iYear = matchArray[1];		
		}
		else {
			datestatus = false;
		}
		
		if (datestatus) {
			if (iMonth < 1 || iMonth > 12) {
				datestatus=false;
			}
			if (iday < 1 || iday > 31) {
				datestatus=false;
			}
			if ((iMonth==4 || iMonth==6 || iMonth==9 || iMonth==11) && iday==31) {
				datestatus=false;
			}
			if (iMonth == 2) {
				if (myCalendar.isLeapYear(iYear, iMonth) == true) {
					if (iday > 29) {
						datestatus=false;
					}
				}
				else {
					if (iday > 28) {
						datestatus=false;
					}
				}
			}
		}
	}
	else {
		datestatus = false;
	}
	return datestatus;
}

myCalendar.validTime = function(iHour, iMinute, iFormat) {
	var bRetval = true;
	if (iFormat == 12) {
		if (iHour < 1 || iHour > 12) bRetval = false;
		if (iMinute < 0 || iMinute > 59) bRetval = false;
	}
	else {
		if (iHour < 0 || iHour > 23) bRetval = false;
		if (iMinute < 0 || iMinute > 59) bRetval = false;
	}
	return bRetval;
}

myCalendar.keyDown_Input = function(obj) {
	var _keyCode = myCalendar.getKeyCode(obj);
	var _input = myCalendar.eventRaisedBy(obj);
	var button = myCalendar.getButtonFromInput(_input);
	if (_keyCode==myCalendar.KEY_F2) {
		if (myCalendar.ctrlRef[button] ['accessKey']) {
			myCalendar.accessKeyPressed(obj);
		}
	}
	else if (_keyCode == myCalendar.KEY_DELETE) {
		if (myCalendar.ctrlRef[button] ['allowDeleteButton']) {
			if (myCalendar.getElementById(_input).readOnly) {
				myCalendar.getElementById(_input).value = '';
			}
		}
	}
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


Written By
Web Developer
India India
biography

Comments and Discussions