Java Script Code of Calendar and Date Picker or Popup Calendar

This is detailed java script code that can use for Calendar or date picker or popup calendar. In the code given below there are three files...

Java Script Code of Calendar and Date Picker or Popup Calendar

Java Script Code of Calendar and Date Picker or Popup Calendar

     

This is detailed java script code that can use for Calendar or date picker or popup calendar. In the code given below there are three files...

1: calendar.html: Html file that shows a calendar control on the web page and a textbox that shows selected date from the date picker. 
2: calendar.js: Java script code file that contains all the java script code that has used in calendar.
3: calendra.css: CSS file that is used to give a better look to the calendar control.

This code provides some extra functionality with the calendar control like..

1: It display the current date with different color and in bold format.
2: If user already selected a date, this calendar control shows previous selected date in different color so that user can easily identify the previously selected date.
3: When user moves cursor on that date part of calendar control, color will change according to the movement of cursor.
4: When date is selected, calendar control window disappears automatically or user can close window by close 
   button in between the process.

 1. calendar.html

<head>
   <title>Java Script Calender Date Picker</title>
   <meta http-equiv="Content-Type" content="text/html;">
   <script language="javaScript" 
    type="text/javascript" src="calendar.js"></script>
   <link href="calendar.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#666666">
    <form>
      <input type="text" name="datum1"><a href="#" 
       onClick="setYears(1947, 2008);
       showCalender(this, 'datum1');">
      <img src="calender.png"></a>
    </form>
    <!-- Calender Script  --> 
    <table id="calenderTable">
       <tbody id="calenderTableHead">
         <tr>
           <td colspan="4" align="center">
	     <select onChange="showCalenderBody(
                   createCalender(document.getElementById('selectYear').value,
	           this.selectedIndex, false));"
                   id="selectMonth">
	              <option value="0">Jan</option>
	              <option value="1">Feb</option>
	              <option value="2">Mar</option>
	              <option value="3">Apr</option>
	              <option value="4">May</option>
	              <option value="5">Jun</option>
	              <option value="6">Jul</option>
	              <option value="7">Aug</option>
	              <option value="8">Sep</option>
	              <option value="9">Oct</option>
	              <option value="10">Nov</option>
	              <option value="11">Dec</option>
	          </select>
            </td>
            <td colspan="2" align="center">
	    <select onChange="showCalenderBody(createCalender(this.value, 
	      document.getElementById('selectMonth').selectedIndex, false));"
              id="selectYear">
	    </select>
			</td>
           <td align="center">
	    <a href="#" onClick="closeCalender();">
              <font color="#003333" size="+1">X</font>
            </a>
	   </td>
	</tr>
       </tbody>
       <tbody id="calenderTableDays">
         <tr style="">
           <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
           <td>Thu</td><td>Fri</td><td>Sat</td>
         </tr>
       </tbody>
       <tbody id="calender"></tbody>
    </table>
<!-- End Calender Script  --> 
  </body>
</html>

2. calendar.js

 // Array of max days in month in a year and in a leap year
monthMaxDays	= [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];
function getRealYear(dateObj)
{
	return (dateObj.getYear() % 100) + 
         (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
function getDaysPerMonth(month, year)
{
	/* 
	Check for leap year. These are some conditions 
        to check year is leap year or not...
	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 monthMaxDays[month];
	
		return monthMaxDaysLeap[month];
	}
	else
		return monthMaxDays[month];
}
function createCalender(year, month, day)
{
	 // current Date
	var curDate = new Date();
	var curDay = curDate.getDate();
	var curMonth = curDate.getMonth();
	var curYear = 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;		
	}
	document.getElementById('selectMonth').selectedIndex = month;
	 // first day of the month.
	var fristDayOfMonthObj = new Date(year, month, 1);
	var firstDayOfMonth = fristDayOfMonthObj.getDay();
	continu		= true;
	firstRow	= true;
	var x	= 0;
	var d	= 0;
	var trs = []
	var ti = 0;
	while (d <= getDaysPerMonth(month, year))
	{
		if (firstRow)
		{
			trs[ti] = document.createElement("TR");
			if (firstDayOfMonth > 0)
			{
				while (x < firstDayOfMonth)
				{
				trs[ti].appendChild(document.createElement
                                ("TD"));
				x++;
				}
			}
			firstRow = false;
			var d = 1;
		}
		if (x % 7 == 0)
		{
			ti++;
			trs[ti] = document.createElement("TR");
		}
		if (day && d == day)
		{
			var setID = 'calenderChoosenDay';
			var styleClass = 'choosenDay';
			var setTitle = 'this day is currently selected';
		}
		else if (d == curDay && month == curMonth && year == curYear)
		{
			var setID = 'calenderToDay';
			var styleClass = 'toDay';
			var setTitle = 'this day today';
		}
		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;
		}
		td.onmouseover = new Function('highLiteDay(this)');
		td.onmouseout = new Function('deHighLiteDay(this)');
		if (targetEl)
			td.onclick = new Function(
                           'pickDate('+year+', '+month+', '+d+')'
                           );
		else
			td.style.cursor = 'default';
		td.appendChild(document.createTextNode(d));
		trs[ti].appendChild(td);
		x++;
		d++;
	}
	return trs;
}
function showCalender(elPos, tgtEl)
{
	targetEl = false;
	if (document.getElementById(tgtEl))
	{
		targetEl = document.getElementById(tgtEl);
	}
	else
	{
		if (document.forms[0].elements[tgtEl])
		{
			targetEl = document.forms[0].elements[tgtEl];
		}
	}
	var calTable = document.getElementById('calenderTable');
	var positions = [0,0];
	var positions = getParentOffset(elPos, positions);	
	calTable.style.left = positions[0]+'px';		
	calTable.style.top = positions[1]+'px';			
	calTable.style.display='block';
	var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
	var m = matchDate.exec(targetEl.value);
	if (m == null)
	{
		trs = createCalender(false, false, false);
		showCalenderBody(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 = createCalender(m[3], m[2], m[1]);
		showCalenderBody(trs);
	}
	hideSelect(document.body, 1);
}
function showCalenderBody(trs)
{
	var calTBody = document.getElementById('calender');
	while (calTBody.childNodes[0])
	{
		calTBody.removeChild(calTBody.childNodes[0]);
	}
	for (var i in trs)
	{
		calTBody.appendChild(trs[i]);
	}
}
function setYears(sy, ey)
{
	 // current Date
	var curDate = new Date();
	var curYear = getRealYear(curDate);
	if (sy)
		startYear = curYear;
	if (ey)
		endYear = curYear;
	document.getElementById('selectYear').options.length = 0;
	var j = 0;
	for (y=ey; y>=sy; y--)
	{
	document.getElementById('selectYear')[j++] = new Option(y, y);
	}
}
function hideSelect(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 calenderEl = document.getElementById('calenderTable');
		var positions = [0,0];
		var positions = getParentOffset(thisTag, positions);	// nieuw
		var thisLeft	= positions[0];
		var thisRight	= positions[0] + thisTag.offsetWidth;
		var thisTop	= positions[1];
		var thisBottom	= positions[1] + thisTag.offsetHeight;
		var calLeft	= calenderEl.offsetLeft;
		var calRight	= calenderEl.offsetLeft + calenderEl.offsetWidth;
		var calTop	= calenderEl.offsetTop;
		var calBottom	= calenderEl.offsetTop + calenderEl.offsetHeight;
		if (
		(
		// check if it overlaps horizontally 
		(thisLeft >= calLeft && thisLeft <= calRight)
		||
		(thisRight <= calRight && thisRight >= calLeft)
		||
		(thisLeft <= calLeft && thisRight >= calRight)
		)
		&&
		(
		// check if it overlaps vertically 
		(thisTop >= calTop && thisTop <= calBottom)
		||
		(thisBottom <= calBottom && thisBottom >= calTop)
		||
		(thisTop <= calTop && thisBottom >= calBottom)
		)
		)
		{
		hideSelectTags[hideSelectTags.length] = thisTag;
		thisTag.style.display = 'none';
		}
		}
		}
		else if(thisTag.childNodes.length > 0)
		{
			hideSelect(thisTag, (superTotal+1));
		}
	}
}
function closeCalender()
{
	for (var i=0; i<hideSelectTags.length; i++)
	{
		hideSelectTags[i].style.display = 'block';
	}
	hideSelectTags.length = 0;
	document.getElementById('calenderTable').style.display='none';
}
function highLiteDay(el)
{
	el.className = 'hlDay';
}
function deHighLiteDay(el)
{
	if (el.id == 'calenderToDay')
		el.className = 'toDay';
	else if (el.id == 'calenderChoosenDay')
		el.className = 'choosenDay';
	else
		el.className = 'normalDay';
}
function pickDate(year, month, day)
{
	month++;
	day	= day < 10 ? '0'+day : day;
	month	= month < 10 ? '0'+month : month;
	if (!targetEl)
	{
		alert('target for date is not set yet');
	}
	else
	{
		targetEl.value= day+'-'+month+'-'+year;
		closeCalender();
	}
}
function getParentOffset(el, positions)
{
	positions[0] += el.offsetLeft;
	positions[1] += el.offsetTop;
	if (el.offsetParent)
	  positions = getParentOffset(el.offsetParent, positions);
	return positions;
}

Save both files in same directory along with the file calendar.css and an image 'calender.png'. To run calendar control, run calendar.html file and select the appropriate month, year and date.

When user clicks on the button adjacent to text box, a calendar will appear on the web page....

In the appeared calendar we can select month, year and date. After date selection calendar window will disappear automatically and selected date is shown in text box.

 

Download Source Code