info about link
: Javascript Index : PHP : MySQL :
calendar date picker
: Source : : Explanation : : Example : : Todo : : Feedback :

calendar_date_picker.js (v. 2.11)

Finally a calendar script that really does work, looks cool, works with forms and doesn't cost you anything!

Added: 2006-09-07 07:53:21
Last update: 2008-10-16 22:34:25

download javascript source code only
download full working script (recommended)

Core-Source Only! This (below) is not the full script!
Click here for the full script
/******
* You may use and/or modify this script as long as you:
* 1. Keep my name & webpage mentioned
* 2. Don't use it for commercial purposes
*
* If you want to use this script without complying to the rules above, please contact me first at: marty@excudo.net
*
* Please be aware that this is only the core source-code of a full script and that it may not work (for you) without the rest.
* The full script can be downloaded from my website. A working example is provided there as well.
* 
* Author: Martijn Korse
* Website: http://devshed.excudo.net
*
* Date:  2006-09-07 07:53:21
***/

/**
 * Calendar Date Picker constructor
 * 
 * This is how you can create an object:
 * 
 * var cdp = new CalendarDatePicker({
 *	debug :			true,
 *	weekStartsAt :		1,
 *	excludeDays :		[6,0,1],
 *	excludeDates :		['20081225','20081226'],
 *	minimumFutureDate :	[7,true],
 *	formatDate :		'%d-%m-%y'
 *	});
 *
 * if you are unfamiliar with this syntax, you could also try this notation:
 *
 * var props = {};
 * props.debug			= true;
 * props.weekStartsAt		= 1;
 * props.excludeDays		= [6,0,1];
 * props.excludeDates		= ['20081225','20081226'];
 * props.minimumFutureDate	= [7,true];
 * props.formatDate		= '%d-%m-%y';
 * var cdp = new CalendarDatePicker(props);
 *
 * which does exactly the same.
 *
 * These are the properties that can be set:
 * debug		if true, error messages will be shown (in the form of alerts)
 * excludeDays		days (of the week) that are not selectable (0-6; 0=sunday, 6=saturday)
 * excludeDates		array of dates that are not selectable. format: yyyymmdd
 * minimumDate		dates before this date are not selectable. format: yyyymmdd
 * maximumDate		dates after this date are not selectable. format: yyyymmdd
 * weekStartsAt		indicates on which day a week in the calendar must start (0-6; 0=sunday, 6=saturday)
 * minimumFutureDate	same as minimum date but defined as an offset on the current date.
 *			must be set as an array of which the second argument indicates whether excluded days should be considered as well
 * startYear		first selectable year in the select-box of the calendar
 * endYear		last selectable year in the select-box of the calendar
 * 
 * For a more extensive overview and explanation of the properties, see:
 * http://devshed.excudo.net/scripts/javascript/example/calendar_date_picker_help.php
 *
 * @param array props
 * @return CalendarDatePicker
 */
function CalendarDatePicker (props)
{
	// defining some properties
	// these can not change
	this.NAME		= 'Calendar Date Picker';
	this.VERSION		= '2.11';
	// private properties
	this._monthMaxDays	= [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	this._monthMaxDaysLeap	= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	this._hideSelectTags	= [];
	this._targetEl		= false;

	// defining more properties and setting their defaults
	// these can be customized by the user
	this.debug		= false;
	this.excludeDays	= [];
	this.excludeDates	= [];
	this.minimumDate	= false;
	this.maximumDate	= false;
	this.weekStartsAt	= 0;	// 0=sunday, 1=monday, 2=tuesday, 3=wednesday, 4=thursday, 5=friday, 6=saturday
	this.formatDate		= '%d-%m-%y';
	this.futureDays		= 0;
	this.futureWorkingDays	= 0;

	this.startYear		= CalendarDatePicker.prototype.getRealYear(new Date);
	this.endYear		= this.startYear + 10;

	if (typeof(props) != 'undefined')
	{
		// setting custom values that were passed by the user.
		if (typeof(props.debug) != 'undefined')
		{
			if (props.debug == false || props.debug == true)
				this.debug = props.debug;
			else
				alert('you didn\'t set the debug flag correctly');
		}
		if (typeof(props.startYear) != 'undefined')
		{
			var startYear = parseInt(props.startYear);
			if (startYear <= 0 || isNaN(startYear))
				this.debug ? alert('you\'ve tried to set an illegal year ('+props.startYear+') as minimum year') : '';
			else
				this.startYear = props.startYear;
		}
		if (typeof(props.endYear) != 'undefined')
		{
			var endYear = parseInt(props.endYear);
			if (endYear <= 0 || isNaN(endYear))
				this.debug ? alert('you\'ve tried to set an illegal year ('+props.endYear+') as maximum year') : '';
			else if (props.endYear < this.startYear)
				this.debug ? alert('you\'ve tried to set a value as maximum year ('+props.endYear+') that is before the start year ('+this.startYear+')') : '';
			else
				this.endYear = props.endYear;
		}
		if (typeof(props.excludeDays) != 'undefined')
		{
			for (var i in props.excludeDays)
			{
				if (props.excludeDays[i] < 0 || props.excludeDays[i] > 6)
				{
					this.debug ? alert(props.excludeDays[i]+' is not a valid day to exclude. it has to be between 0 and 6') : '';
					props.excludeDays = this.excludeDays;
					break;
				}
			}
			this.excludeDays = props.excludeDays;
		}
		if (typeof(props.excludeDates) != 'undefined')
		{
			for (var i in props.excludeDates)
			{
				if (!props.excludeDates[i].match(/^\d{8}$/))
				{
					this.debug ? alert(props.excludeDates[i]+' is not a valid date to exclude. it has to be of the format yyyymmdd') : '';
					props.excludeDates = this.excludeDates;
					break;
				}
			}
			this.excludeDates = props.excludeDates;
		}
		if (typeof(props.formatDate) != 'undefined')
		{
			var f = props.formatDate;
			if (!f.match(/%d/) || !f.match(/%m/) || !f.match(/%y/))
			{
				this.debug ? alert(props.formatDate+' is not a valid format. it needs to contains %d, %m & %y') : '';
			}
			else
			{
				this.formatDate = props.formatDate;
			}
		}

		// the minimum date the calendar accepts as pickable
		// first we check if a future date has been set (current timestamp + offset); if not, we check if a specific date has been set
		if (typeof(props.minimumFutureDate) != 'undefined')
		{
			if (typeof(props.minimumFutureDate) == 'object')
				this.setFutureDate(props.minimumFutureDate[0], props.minimumFutureDate[1]);
			else
				this.setFutureDate(props.minimumFutureDate);
		}
		else if (typeof(props.minimumDate) != 'undefined')
			this.minimumDate = props.minimumDate;
		//minimum date is set, now the maximum date the calendar accepts as pickable
		if (typeof(props.maximumDate) != 'undefined')
			this.maximumDate = props.maximumDate;
		// this indicates at which day the week in the calendar starts, ranging from 0 (sunday) to 6 (saturday)
		if (typeof(props.weekStartsAt) != 'undefined')
		{
			if (props.weekStartsAt < 0 || props.weekStartsAt > 6)
				this.debug ? alert(props.weekStartsAt+' is not a valid starting point of the week. it has to be between 0 (sunday) and 6 (saturday)') : '';
			else
				this.weekStartsAt = props.weekStartsAt;
		}

		// based on the set properties we're gonna set some initial values using some methods
		this.setYears(this.startYear, this.endYear);
	}
}
/**
 * returns the year in format YYYY
 * @param Date dateObj
 * @return int
 */
CalendarDatePicker.prototype.getRealYear = function (dateObj)
{
	return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
/**
 * returns the amount of days a certain month has, thereby taking leap-years into account
 * @param int month the month of which we want to know the amount of days. Note: january = 0
 * @param int year the year in which the calendar is set
 * @return int
 */
CalendarDatePicker.prototype.getDaysPerMonth = function (month, year)
{
	/* 
	Check for leap year ..
	1.Years evenly divisible by four are normally leap years, except for... 
	2.Years also evenly divisible by 100 are not leap years, except for... 
	3.Years also evenly divisible by 400 are leap years. 
	*/
	if ((year % 4) == 0)
	{
		if ((year % 100) == 0 && (year % 400) != 0)
			return this._monthMaxDays[month];
	
		return this._monthMaxDaysLeap[month];
	}
	else
		return this._monthMaxDays[month];
}
/**
 * Creates the calender.
 * It creates an array of dom-elements: all the table-rows which contain the days of the current year+month
 * @param int year
 * @param int month
 * @param int day
 * @return array
 */
CalendarDatePicker.prototype.createCalendar = function (year, month, day)
{
	 // current Date
	var curDate = new Date();
	var curDay = curDate.getDate();
	var curMonth = curDate.getMonth();
	var curYear = this.getRealYear(curDate)

	 // if a date already exists, we calculate some values here
	if (!year)
	{
		var year = curYear;
		var month = curMonth;
	}

	var yearFound = 0;
	for (var i=0; i<document.getElementById('selectYear').options.length; i++)
	{
		if (document.getElementById('selectYear').options[i].value == year)
		{
			document.getElementById('selectYear').selectedIndex = i;
			yearFound = true;
			break;
		}
	}
	if (!yearFound)
	{
		document.getElementById('selectYear').selectedIndex = 0;
		year = document.getElementById('selectYear').options[0].value;		
	}
	if (month < 0 || month > 11)
	{
		month = curMonth;
	}
	document.getElementById('selectMonth').selectedIndex = month;

	 // first day of the month is a ....
	var firstDayOfMonthObj = new Date(year, month, 1);
	// compensating in case the first day is not a sunday
	var firstDayOfMonth = firstDayOfMonthObj.getDay() + (7 - this.weekStartsAt);
	if (firstDayOfMonth > 7)
		firstDayOfMonth -= 7;

	var firstRow	= true;
	var x	= 0;
	var d	= 0;
	var trs = []
	var ti = 0;
	while (d <= this.getDaysPerMonth(month, year))
	{
		if (firstRow)
		{
			// the first row. we have to find out at which position we start with the first day
			trs[ti] = document.createElement("TR");
			if (firstDayOfMonth > 0)
			{
				while (x < firstDayOfMonth)
				{
					trs[ti].appendChild(document.createElement("TD"));
					x++;
				}
			}
			firstRow = false;
			var d = 1;
		}
		// end of the row, we have to start a new one
		if (x % 7 == 0)
		{
			ti++;
			trs[ti] = document.createElement("TR");
		}
		// this is the day the user has in the input-element
		if (day && d == day)
		{
			var setID = 'calendarChoosenDay';
			var styleClass = 'choosenDay';
			var setTitle = 'this day is currently selected';
		}
		// today
		else if (d == curDay && month == curMonth && year == curYear)
		{
			var setID = 'calendarToDay';
			var styleClass = 'toDay';
			var setTitle = 'this day today';
		}
		// just an ordinary day
		else
		{
			var setID = false;
			var styleClass = 'normalDay';
			var setTitle = false;
		}
		var td = document.createElement("TD");
		td.className = styleClass;
		if (setID)
		{
			td.id = setID;
		}
		if (setTitle)
		{
			td.title = setTitle;
		}

		// doing some calculation to see if this date is pickable
		var dObj = new Date(year, month, d);
		var fullDate = year+''+this.addZero((month+1))+''+this.addZero(d);
		var minDateOk = !this.minimumDate || parseInt(fullDate) >= this.minimumDate;
		var maxDateOk = !this.maximumDate || parseInt(fullDate) <= this.maximumDate;
		if (minDateOk && maxDateOk && !this.inArray(dObj.getDay(), this.excludeDays) && !this.inArray(fullDate, this.excludeDates))
		{
			td.onmouseover = new Function('CalendarDatePicker.prototype.highLiteDay(this)');
			td.onmouseout = new Function('CalendarDatePicker.prototype.deHighLiteDay(this)');
			var self = this;
			var method = 'pickDate';
			// date is pickable, but only if there is a target element in which to show the date-string
			if (this._targetEl)
			{
				td.onclick = this.pickDate(self, year, month, d);
			}	
			else
			{
				td.style.cursor = 'default';
			}
		}
		else
		{
			// date not pickable. 
			td.style.cursor = 'default';
			td.className += ' excludedDay';
		}
		td.appendChild(document.createTextNode(d));
		trs[ti].appendChild(td);
		x++;
		d++;
	}
	return trs;
}
/**
 * shows the calendar on the screen
 * @param Obj elPos the HTML-element that represents the calender. we want to know it, because that's where we want to place the real calendar
 * @param Obj tgtEl the HTML-element in which we have to show the date when it gets clicked (picked)
 * @return void
 */
CalendarDatePicker.prototype.showCalendar = function (el, tgtEl)
{
	// we set the target element to false by default and will later overwrite it when it appears it really exists
	this._targetEl = false;

	// setting reference to this object
	var self = this;

	// setting the years for this calendar
	this.setYearsInSelect();

	// registering onclick for the close button
	document.getElementById('closeCalendarLink').onclick = function ()
	{
		self.closeCalendar();
	}

	// registering the onchange for the selection of the month
	document.getElementById('selectMonth').onchange = function()
	{
		var selectedYear = document.getElementById('selectYear').value;
		self.showCalendarBody(self.createCalendar(selectedYear, document.getElementById('selectMonth').selectedIndex, false));
	}
	// registering the onchange for the select of the year
	document.getElementById('selectYear').onchange = function()
	{
		var selectedYear = document.getElementById('selectYear').value;
		self.showCalendarBody(self.createCalendar(selectedYear, document.getElementById('selectMonth').selectedIndex, false));
	}

	if (document.getElementById(tgtEl))
	{
		this._targetEl = document.getElementById(tgtEl);
	}
	else
	{
		if (document.forms[0].elements[tgtEl])
		{
			this._targetEl = document.forms[0].elements[tgtEl];
		}
		else
		{
			this.debug ? alert('Target field could not be found\nCalendar won\'t open therefor') : '';
		}
	}
	var calTable = document.getElementById('calendarTable');

	// determining where to place the calendar
	var positions = getElementPosition(el);
	calTable.style.left = positions[0]+'px';
	calTable.style.top = positions[1]+'px';
	// coordinates are known, we show it.
	calTable.style.display='block';

	// let's see if the value of the target element contains a valid date.
	// if so, we're gonna use that month and year as the one we show
	if (tgtEl != false && this._targetEl.value.length > 0)
	{
		var inputDate = this.getDateFromFormattedDate(this._targetEl.value);
	}
	else
	{
		var inputDate = '';
	}
	var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
	var m = matchDate.exec(inputDate);
	if (m == null)
	{
		trs = this.createCalendar(false, false, false);
		this.showCalendarBody(trs);
	}
	else
	{
		if (m[1].substr(0, 1) == 0)
			m[1] = m[1].substr(1, 1);
		if (m[2].substr(0, 1) == 0)
			m[2] = m[2].substr(1, 1);
		m[2] = m[2] - 1;
		trs = this.createCalendar(m[3], m[2], m[1]);
		this.showCalendarBody(trs);
	}
	// hiding any select-fields that are localted under the calendar
	this.hideSelect(document.body, 1);
}
/**
 * displaying the body of the calendar
 * @param array trs
 * @see createCalendar()
 * @return void
 */
CalendarDatePicker.prototype.showCalendarBody = function (trs)
{
	var calTBody = document.getElementById('calendar');
	while (calTBody.childNodes[0])
	{
		calTBody.removeChild(calTBody.childNodes[0]);
	}
	for (var i in trs)
	{
		calTBody.appendChild(trs[i]);
	}
}
/**
 * public function to set the starting and ending year of the calendar
 * @param sy int startyear: the first available year in the select-box of the calendar
 * @param ey int endyear: the last available year in the select-box of the calendar
 * @return void
 */
CalendarDatePicker.prototype.setYears = function (sy, ey)
{
	this.startYear = sy;
	this.endYear = ey;
}
/**
 * fills the year-selectbox of the calendar with the available years
 * @see setYears()
 * @see showCalendar()
 * @return void
 */
CalendarDatePicker.prototype.setYearsInSelect = function ()
{
	 // current Date
	var curDate = new Date();
	var curYear = this.getRealYear(curDate);
	if (this.startYear)
		startYear = curYear;
	if (this.endYear)
		endYear = curYear;
	document.getElementById('selectYear').options.length = 0;
	var j = 0;
	for (y=this.endYear; y>=this.startYear; y--)
	{
		document.getElementById('selectYear')[j++] = new Option(y, y);
	}
}
/**
 * This function is in charge of hiding any select-box that would be locataed directly underneath the calendar in the moment we show it.
 * This is necessary because Internet Exploder will mess up the calendar otherwise. (In a worst case, it would render the close button inoperable)
 * @param object el		refernce to a DOM-element. When the function is called for the first time, this will be the body-tag
 * @param int superTotal	keeps track of how many times we recurse. it's a failsafe for infinite loops, because when it reaches a certain maximum it quits the function.
 * @return void
 */
CalendarDatePicker.prototype.hideSelect = function (el, superTotal)
{
	if (superTotal >= 100)
	{
		return;
	}

	var totalChilds = el.childNodes.length;
	for (var c=0; c<totalChilds; c++)
	{
		var thisTag = el.childNodes[c];
		if (thisTag.tagName == 'SELECT')
		{
			if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
			{
				var calendarEl = document.getElementById('calendarTable');
				var positions  = getElementPosition(thisTag);
				var thisLeft	= positions[0];
				var thisRight	= positions[0] + thisTag.offsetWidth;
				var thisTop	= positions[1];
				var thisBottom	= positions[1] + thisTag.offsetHeight;
				var calLeft	= calendarEl.offsetLeft;
				var calRight	= calendarEl.offsetLeft + calendarEl.offsetWidth;
				var calTop	= calendarEl.offsetTop;
				var calBottom	= calendarEl.offsetTop + calendarEl.offsetHeight;

				if (
					(
						/* seeing if it overlaps horizontally */
						(thisLeft >= calLeft && thisLeft <= calRight)
							||
						(thisRight <= calRight && thisRight >= calLeft)
							||
						(thisLeft <= calLeft && thisRight >= calRight)
					)
						&&
					(
						/* seeing if it overlaps vertically */
						(thisTop >= calTop && thisTop <= calBottom)
							||
						(thisBottom <= calBottom && thisBottom >= calTop)
							||
						(thisTop <= calTop && thisBottom >= calBottom)
					)
				)
				{
					this._hideSelectTags[this._hideSelectTags.length] = thisTag;
					thisTag.style.visibility = 'hidden';
				}
			}

		}
		else if(thisTag.childNodes.length > 0)
		{
			this.hideSelect(thisTag, (superTotal+1));
		}
	}
}
/**
 * Checks whether the passed needle (any value) can be found in the haystack (an array)
 * @param mixed needle		the value of which we want to know whether it exists in a certain array
 * @param array haystack	the array in which the needle may (not) be
 * @return boolean		true when the needle was found
 */
CalendarDatePicker.prototype.inArray = function (needle, haystack)
{
	for (var i in haystack)
	{
		if (needle == haystack[i])
			return true;
	}
	return false;
}
/**
 * Adds a zero when the passed value is below 10
 * Bit of a primitive function in its current form, but it serves its purpose in this class
 * @param integer/string x (if it's a string it should be a string holding a number)
 * @return string
 */
CalendarDatePicker.prototype.addZero = function (x)
{
	if (parseInt(x) < 10)
		x = '0'+x;
	return x;
}
/**
 * Closes the calendar (hides it)
 * This should happen when:
 * - the user clicks the X on the top-right
 * - the user selects a date from the calendar
 * @return void
 */
CalendarDatePicker.prototype.closeCalendar = function ()
{
	for (var i=0; i<this._hideSelectTags.length; i++)
	{
		this._hideSelectTags[i].style.visibility = 'visible';
	}
	this._hideSelectTags.length = 0;
	document.getElementById('calendarTable').style.display='none';
}
/**
 * Highlights a day on the calendar when the mouse-pointer hovers over it
 * It does so by switching stylesheet-classes
 * (so, if there is nothing defined in the stylesheet, you won't see any effect
 * @param obj el reference to the dom-object that is the cell that is holding the value of the day
 * @see deHighLiteDay()
 */
CalendarDatePicker.prototype.highLiteDay = function (el)
{
	el.className = 'hlDay';
}
/**
 * Same as highLiteDay(), but returns the cell to it's original value again
 * @param obj el reference to the dom-object that is the cell that is holding the value of the day
 * @see highLiteDay()
 */
CalendarDatePicker.prototype.deHighLiteDay = function(el)
{
	if (el.id == 'calendarToDay')
		el.className = 'toDay';
	else if (el.id == 'calendarChoosenDay')
		el.className = 'choosenDay';
	else
		el.className = 'normalDay';
}
/**
 * Selects a date from the calendar and sets it as the value of the target element
 * @param CalendarDatePicker obj	The current CalendarDatePicker object
 * @param integer year			The year that has been selected
 * @param integer month			The month that has been selected
 * @param integer day			The day that has been selected
 * @return void
 */
CalendarDatePicker.prototype.pickDate = function (obj, year, month, day)
{
	return function () {
		month++;
		day	= day < 10 ? '0'+day : day;
		month	= month < 10 ? '0'+month : month;
		if (!obj._targetEl)
		{
			this.debug ? alert('target for date is not set yet') : '';
		}
		else
		{
			var outputDate = obj.formatDate.replace(/%d/, day);
			outputDate = outputDate.replace(/%m/, month);
			outputDate = outputDate.replace(/%y/, year);
			obj._targetEl.value= outputDate;
			obj.closeCalendar();
		}
	}
}

/**
 * Given a certain offset, it returns that amount of normal days that is required to reach that offset
 * offset is relative to current day
 * If there is not any date excluded, the returned value will be the same as the offset.
 * If all days have to be counted, the returned value can still differ from the offset, because an exluded day will never be allowed as the result
 * @param integer days		The offset
 * @param boolean workingDays	Determines whether the offset is in normal days or only days that are not excluded
 *				The term 'workingDays' has been used as a symbol for this
 * @return integer
 */
CalendarDatePicker.prototype.getDayByOffset = function(days, workingDays)
{
   	var curDate = new Date();
    	curDate.setHours(0);
    	curDate.setMinutes(0);
    	curDate.setSeconds(0);
    	curDate.setMilliseconds(0);
    	var passedWorkingDays = 0;
    	var passedDays = 0;
    	var unixToday = curDate.getTime();
    	var loopDate = new Date();
    	while (passedWorkingDays < days)
    	{
    		passedDays += 1;
    		var minUnixTime = unixToday + (1000 * 60 * 60 * 24 * passedDays);
    		loopDate.setTime(minUnixTime);
	
    		if (!workingDays || !this.dateIsExcluded(loopDate))
        	{
    			passedWorkingDays += 1;
    		}
    	}
	// final check. this could be true when we're not counting working days but normal days
	// still, we don't want to return a date that is excluded
	var addDays = 0;
	if (this.dateIsExcluded(loopDate))
	{
		while (this.dateIsExcluded(loopDate))
		{
	    		addDays += 1;
    			var minUnixTime = unixToday + (1000 * 60 * 60 * 24 * addDays);
    			loopDate.setTime(minUnixTime);
		}
	}
    	return (passedDays + addDays);
}
/**
 * Determines whether a date is excluded (by means of the excludedDays & excludedDates properties).
 * @param Date dateObj (date-object (with a certain date set))
 * @return boolean
 */
CalendarDatePicker.prototype.dateIsExcluded = function(dateObj)
{
	if (this.inArray(dateObj.getDay(), this.excludeDays) || this.inArray(this.getDate(dateObj), this.excludeDates))
		return true;
	else
		return false;
}
/**
 * Calculates a date in the future by adding 'offset' days to the current date
 * Optionally, it can take into account days that are not selectable in this calculation.
 * @param integer offset	
 * @param boolean countAllDays	If true, unselectable days also count. If false, they are skipped.
 * @return string (date in the format yyyymmdd)
 */
CalendarDatePicker.prototype.getFutureDate = function (offset, countAllDays)
{
	if (typeof(countAllDays) == 'undefined')
		countAllDays = true;
	var days = this.getDayByOffset(offset, !countAllDays);
	var curDate = new Date();
	var minUnixTime = curDate.getTime() + (1000 * 60 * 60 * 24 * days);
	curDate.setTime(minUnixTime);
	return this.getDate(curDate);
}
/**
 * Same as above, but sets it as a property of the instantiated object
 * The property that is set is minimumDate
 * @return void
 */
CalendarDatePicker.prototype.setFutureDate = function (offset, countAllDays)
{
	if (typeof(countAllDays) == 'undefined')
		countAllDays = true;
	this.minimumDate = this.getFutureDate(offset, countAllDays);
}
/**
 * given a date-object, it returns that date in the format yyyymmdd
 * @param Date dateObj
 * @return string
 */
CalendarDatePicker.prototype.getDate = function (dateObj)
{
	return this.getRealYear(dateObj)+''+this.addZero(dateObj.getMonth()+1)+''+this.addZero(dateObj.getDate());
}
/**
 * given the date-string of the target-element (an input field of a form), this returns that value in the format dd-mm-YYYY
 * (this might seem like an odd choice, but since the old code was already expecting it and it is only used internal, it's as good a format as any other)
 * it does so by extracting the day, month & year from that string, based on the format that has been set by the user
 * @param string dateStr
 * @return string
 */
CalendarDatePicker.prototype.getDateFromFormattedDate = function (dateStr)
{
	if (this.formatDate.indexOf('%d', 0) < this.formatDate.indexOf('%m', 0))
	{
		if (this.formatDate.indexOf('%y', 0) < this.formatDate.indexOf('%d', 0))
			var dmy = ['y','d','m'];
		else if (this.formatDate.indexOf('%y', 0) > this.formatDate.indexOf('%m', 0))
			var dmy = ['d','m','y'];
		else
			var dmy = ['d','y','m'];
	}
	else
	{
		if (this.formatDate.indexOf('%y', 0) < this.formatDate.indexOf('%m', 0))
			var dmy = ['y','m','d'];
		else if (this.formatDate.indexOf('%y', 0) > this.formatDate.indexOf('%d', 0))
			var dmy = ['m','d','y'];
		else
			var dmy = ['m','y','d'];
	}
	var offset = 0;
	seperationLength = (dateStr.length - 8) / 2;
	for (var i in dmy)
	{
		switch (dmy[i])
		{
			case 'd' :
				var day = dateStr.substr(offset, 2);
				offset += (2 + seperationLength);
				break;
			case 'm' :
				var month = dateStr.substr(offset, 2);
				offset += (2 + seperationLength);
				break;
			case 'y' :
				var year = dateStr.substr(offset, 4);
				offset += (4 + seperationLength);
				break;
		}
	}
	return day+'-'+month+'-'+year;
}

/******
* The following two functions are maintained independantly from the calendar-date-picker script at:
* http://devshed.excudo.net/scripts/javascript/source/get+element+position
* You are encouraged to place them in a seperate file; although this script will always contain the latest code with every update, it will not
* get updated because of a code change in those functions.
* Moreover, even though it works, i'm not overly happy with this code and any discussions should take place there.
***/
function calcPositionCorrection(el)
{
	var curX = 0;
	var curY = 0;
	do {
		curX += el.scrollLeft;
		curY += el.scrollTop;
		if (el.nodeName == 'BODY')
			break;
	} while (el = el.parentNode);
	return [curX, curY];
}
function getElementPosition(el)
{
	var curLeft = 0;
	var curTop = 0;
	var corrections = calcPositionCorrection(el);

	if (el.offsetParent)
	{
		do {
			curLeft += el.offsetLeft;
			curTop += el.offsetTop;
		} while (el = el.offsetParent);
		return [ (curLeft - corrections[0]), (curTop - corrections[1]) ];
	}
}

download javascript source code only
download full working script (recommended)




HotScripts.com

Scripts.com

=[Disclaimer]=     © 2005-2018 Excudo.net