Calendar (IE only)
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JavaScript Date Picker</title>
<style rel="stylesheet" id="mainStyle" type="text/css" >
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<style type="text/css">
#calendar {position:absolute;
left:0px;
top:0px;
visibility:hidden
}
table {font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#999999
}
th {background-color:#ccffcc;
text-align:center;
font-size:10px;
width:26px
}
#tableHeader {background-color:#ffcccc;
width:100%
}
td {background-color:#ffffcc;
text-align:center;
font-size:10px
}
#tableBody tr td {width:26px}
#today {background-color:#ffcc33}
a:link {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:hover {color:#990033; text-decoration:underline}
</style>
<script type="text/javascript">
/* ***********************************************************
Example 4-3 (DHTMLAPI.js)
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O'Reilly & Associates ISBN 1-56592-494-0
http://www.oreilly.com
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ */
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.com).
// Release 2.0. Supports NN4, IE, and W3C DOMs.
// Global variables
var isCSS, isW3C, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
}
}
// Set event handler to initialize API
window.onload = initDHTMLAPI;
// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
}
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
}
// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
}
// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
}
// Set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
}
// Set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
}
// Set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
}
// Set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
}
// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
}
// Retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
}
// Retrieve the rendered width of an element
function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
}
// Retrieve the rendered height of an element
function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
}
// Return the available content width space in browser window
function getInsideWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element's clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element's clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
}
</script>
<script type="text/javascript">
/*******************
UTILITY FUNCTIONS
********************/
// day of week of month's first day
function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1);
return firstDate.getDay();
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
var nextMonth = new Date(theYear, theMonth + 1, 1);
nextMonth.setHours(nextMonth.getHours() - 3);
return nextMonth.getDate();
}
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
return {left:offsetLeft, top:offsetTop};
}
// position and show calendar
function showCalendar(evt) {
evt = (evt) ? evt : event;
if (evt) {
if (document.getElementById("calendar").style.visibility != "visible") {
var elem = (evt.target) ? evt.target : evt.srcElement;
var position = getElementPosition(elem.id);
shiftTo("calendar", position.left + elem.offsetWidth, position.top);
show("calendar");
} else {
hide("calendar");
}
}
}
/************************
DRAW CALENDAR CONTENTS
*************************/
// clear and re-populate table based on form's selections
function populateTable(form) {
// pick up date form choices
var theMonth = form.chooseMonth.selectedIndex;
var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text);
// initialize date-dependent variables
var firstDay = getFirstDay(theYear, theMonth);
var howMany = getMonthLen(theYear, theMonth);
var today = new Date();
// fill in month/year in table header
document.getElementById("tableHeader").innerHTML =
form.chooseMonth.options[theMonth].text + " " + theYear;
// initialize vars for table creation
var dayCounter = 1;
var TBody = document.getElementById("tableBody");
// clear any existing rows
while (TBody.rows.length > 0) {
TBody.deleteRow(0);
}
var newR, newC, dateNum;
var done=false;
while (!done) {
// create new row at end
newR = TBody.insertRow(TBody.rows.length);
if (newR) {
for (var i = 0; i < 7; i++) {
// create new cell at end of row
newC = newR.insertCell(newR.cells.length);
if (TBody.rows.length == 1 && i < firstDay) {
// empty boxes before first day
newC.innerHTML = " ";
continue;
}
if (dayCounter == howMany) {
// no more rows after this one
done = true;
}
// plug in link/date (or empty for boxes after last day)
if (dayCounter <= howMany) {
if (today.getFullYear() == theYear &&
today.getMonth() == form.chooseMonth.selectedIndex &&
today.getDate() == dayCounter) {
newC.id = "today";
}
newC.innerHTML = "<a href='#'onclick='chooseDate(" +
dayCounter + "," + theMonth + "," + theYear +
"); return false;'>" + dayCounter + "</a>";
dayCounter++;
} else {
newC.innerHTML = " ";
}
}
} else {
done = true;
}
}
}
/*******************
INITIALIZATIONS
********************/
// create dynamic list of year choices
function fillYears() {
var today = new Date();
var thisYear = today.getFullYear();
var yearChooser = document.dateChooser.chooseYear;
for (i = thisYear; i < thisYear + 5; i++) {
yearChooser.options[yearChooser.options.length] = new Option(i, i);
}
setCurrMonth(today);
}
// set month choice to current month
function setCurrMonth(today) {
document.dateChooser.chooseMonth.selectedIndex = today.getMonth();
}
/*******************
PROCESS CHOICE
********************/
function chooseDate(date, month, year) {
document.mainForm.date.value = date;
document.mainForm.month.value = month + 1;
document.mainForm.year.value = year;
hide("calendar");
}
</script>
</head>
<body onload="fillYears(); populateTable(document.dateChooser); initDHTMLAPI()">
<h1>Date Picker</h1>
<hr />
<form name="mainForm" id="mainForm" method="POST" action="">
<p>Enter a date:</p>
<p>mm:<input type="text" name="month" id="month" size="3" maxlength="2" value="1">
dd:<input type="text" name="date" id="date" size="3" maxlength="2" value="1">
yyyy:<input type="text" name="year" id="year" size="5" maxlength="4" value="2003">
<input type="button" id="showit" value="Pick Date >>" onclick="showCalendar(event)">
</p>
</form>
<div id="calendar">
<table id="calendarTable" border=1>
<tr>
<th id="tableHeader" colspan="7"></th>
</tr>
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tbody id="tableBody"></tbody>
<tr>
<td colspan="7">
<p>
<form name="dateChooser">
<select name="chooseMonth"
onchange="populateTable(this.form)">
<option selected>January<option>February
<option>March<option>April<option>May
<option>June<option>July<option>August
<option>September<option>October
<option>November<option>December
</select>
<select name="chooseYear" onchange="populateTable(this.form)">
</select>
</form>
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
Related examples in the same category
