<html>
<head>
<title>Date Picker</title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="javascript">
/* launch function:
function showDatePicker(oEl, fOnChange) {
window.field = oEl;
window.onchange = fOnChange || null;
dpWin = window.open("datePicker.html","","width=300,height=250");
}
*/
/********************************
* datePicker widget...
* created: ~01/09/2003
* author: Jeff Emminger
*
* 03/11/2003
* fixed bug with initializing calendar not showing all dates
*
* 03/11/2003
* added support for ISO or US style dates.
*
* 06/17/2003
* added functionality to start on the month/year displayed in
* window.field.value, if any
*
******* BEGIN EDIT REGION *******/
// SELECT DATE STYLE HERE
// 1 = "ISO" STYLE: YYYYMMDD
// 2 = "US" STYLE: MM/DD/YYYY
var DATE_STYLE = 2;
/******* END EDIT REGION ********/
window.field = (opener)?opener.window.field:null;
window.onchange = (opener)?opener.onchange:null;
var startDate = (window.field && window.field.value) ?
new Date(window.field.value) :
new Date();
var now = new Date(startDate.getFullYear(), startDate.getMonth());
var YY, MM, DD;
var currYY = new Date().getFullYear();
var currMM = new Date().getMonth();
var currDD= new Date().getDate();
function doDatePicker() {
YY = now.getFullYear();
MM = now.getMonth();
DD = now.getDate();
var DAY = now.getDay();
var bLeap = (YY % 4 == 0);
var arrDays = [31,(bLeap)?29:28,31,30,31,30,31,31,30,31,30,31];
var arrMonthNames = ["January","February","March","April","May","June",
"July","August","September","October","November","December"];
var daysFromFirst = (DD % 7) - 1;
var firstDay = DAY - daysFromFirst;
var iDate = 1 - firstDay;
var arrHTML = new Array();
sAlert = ''+
'now = '+ now + '\n' +
'YY = '+ YY + '\n' +
'MM = '+ MM + '\n' +
'DD = '+ DD + '\n' +
'DAY = '+ DAY + '\n' +
'bLeap = '+ bLeap + '\n' +
'daysFromFirst = '+ daysFromFirst + '\n' +
'firstDay = '+ firstDay + '\n' +
'iDate = '+ iDate + '\n' +
'currYY = '+ currYY + '\n' +
'currMM = '+ currMM + '\n' +
'currDD = '+ currDD + '\n' +
'';
//alert(sAlert);
/*
* doDatePicker:
* I present a calendar with clickable dates.
* I return the date clicked as a string to oEl.
*/
// write controls row
arrHTML[arrHTML.length] = '<table align="center"><tr>' +
'<td><input type="button" class="btn_nav" value="<<" onclick="setYear(-1);" title="Previous Year" /></td>' +
'<td><input type="button" class="btn_nav" value="<" onclick="setMonth(-1);" title="Previous Month" /></td>' +
'<td colspan="3"><b>' + arrMonthNames[MM] + ' ' + YY + '</b></td>' +
'<td><input type="button" class="btn_nav" value=">" onclick="setMonth(1);" title="Next Month" /></td>' +
'<td><input type="button" class="btn_nav" value=">>" onclick="setYear(1);" title="Next Year" /></td>' +
'</tr>';
// write day name abbreviation row
arrHTML[arrHTML.length] = '<tr>' +
'<th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>';
// write six rows for calendar weeks
for (row = 0; row < 6; row++) {
arrHTML[arrHTML.length] = '<tr>';
// write seven day cells for each row
for (cell = 0; cell < 7; cell++,iDate++) {
// highlight the date if == to today
var sStyle = (iDate == currDD && MM == currMM && YY == currYY)?' style="font-weight:bold;background-color:highlight;color:highlighttext;"':'';
// only write out valid dates for this month
if (iDate > 0 && iDate <= arrDays[MM])
arrHTML[arrHTML.length] = '<td><input type="button" class="btn" value="' +
iDate + '" onclick="returnDate(this.value);"' + sStyle + ' /></td>';
else arrHTML[arrHTML.length] = '<td onclick="setMonth('+((iDate<1)?-1:(iDate>arrDays[MM])?1:0)+')"> </td>';
}
arrHTML[arrHTML.length] = '</tr>';
}
// end of calendar table
arrHTML[arrHTML.length] = '</table>';
document.getElementById("cal").innerHTML = (arrHTML.join(""));
setEventHandlers();
}
function checkDate() {
}
function returnDate(d) {
var mm = (MM<9)?"0"+(MM+1):MM+1;
var dd = (d < 10)?"0"+d:d;
if (window.field) {
// fire the field's onfocus event if present
window.field.focus();
switch(DATE_STYLE) {
case 1:
window.field.value = YY.toString() +
mm.toString() + dd;
break;
case 2:
window.field.value = mm + "/" + dd + "/" + YY;
break;
default:
DATE_STYLE = 2;
returnDate(d);
break;
}
}
if(window.onchange)
window.onchange();
window.close();
}
function doOver(el) {
el.style.border = "1px outset threedhighlight";
}
function doOut(el) {
el.style.border = "none";
el.blur();
}
function doDown(el) {
el.style.border = "1px inset threedhighlight";
}
function setEventHandlers() {
var c = 0;
var el = document.getElementsByTagName("input");
document.body.onselectstart = function(){return false;};
for (x = 0; x < el.length; x++) {
el[x].onmouseover = function(){doOver(this);};
el[x].onmouseup = function(){doOver(this);};
el[x].onmouseout = function(){doOut(this);};
el[x].onmousedown = function(){doDown(this);};
}
}
function setYear(val) {
now = new Date(YY+val,MM,1);
doDatePicker(window.field);
}
function setMonth(val) {
now = new Date(YY,MM+val,1);
doDatePicker(window.field);
}
</script>
<style type="text/css">
.btn,table,td,tr,th {
line-height:18px;
background-color:threedface;
font:message-box;
cursor:default;
}
.btn {
height:18px;
width:18px;
border:none;
padding-bottom:2px;
}
.btn_nav {
height:18px;
width:22px;
border:1px solid threedface;
line-height:16px;
font-weight:bold;
}
th {
font-weight:bold;
background-color:highlight;
color:captiontext;
border-style:none;
}
table {
width:250px;
border:2px outset threedhighlight;
border-collapse:collapse;
}
td {
text-align:center;
width:14%;
}
body {
background-color:threedhighlight;
border:1px solid threedhighlight;
}
</style>
</head>
<body onLoad="doDatePicker();">
<form action="" method="">
<div id="cal"></div>
<center>
<a href="/#" onclick="window.close();" style="font:statusbar;color:#0000ff;">Close</a>
</center>
</form>
</body>
</html>