Matt Kruse wrote:
Stimp wrote:
preferably one that when clicked can update three date dropdowns (day,
month, year) like
http://www.visitdublin.com/carhire/avis.asp
You can check out mine, which has an example of updating 3 fields just like
at your URL:
http://www.JavascriptToolbox.com/calendarpopup/
Crikey Matt, is that really "The Simplest Possible
Implementation Of A Calendar Popup" ?
For the record, here's one that, to me, is considerably simpler
- but I make no claims regarding "simplest possible"!!
Oh, it doesn't use a popup...
--
Rob
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Calendar</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {font-family: sans-serif;}
..mainDiv
{text-align: center; border: 1px solid red;
width: 14em; height: 17em; position: absolute;
top:4em; left: 1em;
}
..dateHolder
{text-align: center; /* border: 1px solid blue; */
width: 14em; height: 12em; position: absolute;
top:5em; left: 0em;
}
..dateLabel, .monthLabel
{width: 2em; height: 1em; display: block;
position: absolute; top: 4em;
}
..monthLabel
{width: 10em; top: 0em; left: 2em;
}
..dateCell, .weCell, .nodateCell
{text-align: center; border-top: 1px solid white;
border-left: 1px solid white; font-weight: normal;
width: 2em; height: 2em; position: absolute;
line-height: 2; background-color: #333366; color: #ffffff;
}
.weCell
{background-color: #445577; font-weight: normal;}
.nodateCell
{background-color: #ddddff; display: none;}
</style>
<script type="text/javascript">
var startYear = '',
startMonth = '',
selectedYear,
selectedMonth;
var months = ['January','February','March','April','May','June',
'July','August','September','October','November',' December'];
/*************************
Puts dates in the date cells
*************************/
function genDates(ref,yr,mon,t) {
// Calc day number of 1st day of month &
// first cell to put a date in
var refDate= new Date(yr,mon,1);
var startCell = refDate.getDay()-1;
if (startCell < 0) startCell = 6;
var cellDate = 0 - startCell;
var daysInMonth = getMonthDays(yr,mon+1);
document.getElementById('monthLabel').innerHTML =
months[mon] + ' ' + yr;
// If ref cell has kids, then just update
if ( ref.firstChild
&& ref.firstChild.nodeName.toLowerCase() == 'div') {
currentCell = ref.firstChild;
var cellCount = 0;
cellDate++;
// Assign different classNames to dates
while (currentCell) {
// If there's no date for this cell
if (cellDate <= 0 || cellDate > daysInMonth) {
currentCell.className = 'nodateCell';
// If it's Saturday or Sunday
} else if ( cellCount%7-5 == 0 || cellCount%7-6 == 0) {
currentCell.className = 'weCell';
// Must be a week day
} else {
currentCell.className = 'dateCell';
}
currentCell.firstChild.data = cellDate;
cellCount++ ;
cellDate++ ;
currentCell = currentCell.nextSibling;
}
return;
}
// Otherwise, build table from scratch
// Only runs when first created (onload)
var cellWidth = '2',
cellHeight = '2',
cellUnit = 'em',
lineHeight = '2';
clearKids(ref);
for (var i=0; i<6; i++) {
for (var j=0; j<7; j++) {
var oDiv = document.createElement('div');
oDiv.style.width = cellWidth + cellUnit;
oDiv.style.height = cellHeight + cellUnit;
oDiv.style.left = j * cellWidth + cellUnit;
oDiv.style.top = i * cellHeight + cellUnit;
oDiv.style.lineHeight = lineHeight;
// Assign class for no date, weekend, week as above
if (cellDate < 0 || cellDate >= daysInMonth) {
oDiv.className = 'nodateCell';
} else if ( j == 5 || j == 6) {
oDiv.className = 'weCell';
} else {
oDiv.className = 'dateCell';
}
cellDate++;
oDiv.appendChild(document.createTextNode(cellDate) );
oDiv.onclick = sayDate;
ref.appendChild(oDiv);
}
}
}
/*************************
Removes all child nodes
*************************/
function clearKids(ref){
while(ref.firstChild){
ref.removeChild(ref.firstChild);
}
}
/*************************
Builds the calendar
*************************/
function initCal(yr,mon) {
var now = new Date();
// If have been passed a month, assume also got a year
if (typeof mon == 'number') {
now.setMonth(mon);
now.setYear(yr);
// Otherwise, declare mon & yr and set selectors
} else {
var mon = now.getMonth();
var yr = now.getFullYear();
}
// If not initialising from initCal, put selector
// setters inside above else statement.
// Add options to month select
var y = document.dateSel.monthSel;
// If options don't exist, build 'em
var len = months.length;
if (y.length != len) {
y.length = len;
for (var i=0; i<len; i++) {
y[i].text = months[i];
}
}
// Select the current month
y.selectedIndex = mon;
// Add years to year selector (current year +-5)
// Select the current year
var yrRange = 6;
var z = document.dateSel.yearSel;
len = yrRange*2 + 1;
if (z.length != len) {
z.length = len;
var t = yr - yrRange;
for (var k=0; k<len; k++){
z[k].text = t;
if (z[k].text == yr) z[k].selected = true;
t++;
}
} else {
for (var k=0; k<len; k++){
if (z[k].text == yr) {
z[k].selected = true;
}
}
}
if (startYear == '') startYear = yr;
if (startMonth == '') startMonth = mon;
selectedYear = yr; // Remember year & month selected
selectedMonth = mon; // as global variables
if (document.getElementById) {
genDates(document.getElementById('dateBlock'),yr,m on);
}
}
/*************************
Returns the number of days in the month,
given year and month (1-12) numbers
*************************/
function getMonthDays(Y,M){
if ( M==4 || M==6 || M==9 || M==10){
return 30;
} else if ( M==2 && Y%4==0){
if ( Y%100!=0 || Y%400==0){
return 29;
}
} else if ( M==2 ) {
return 28;
}
return 31;
}
/*************************
Sets the calendar back to the initial month
and resets the form (which is pretty pointless...)
*************************/
function resetForm(){
document.dateSel.reset();
if (startYear != '' && startMonth != '')
initCal(startYear,startMonth);
}
/*************************
Does something when a cell is clicked on
Could return the date to a form
*************************/
function sayDate(e) {
// var e = e || window.event;
var srcEle = (e)?e.target : window.event.srcElement;
var dateISO = selectedYear + '-'
+ addZ(selectedMonth+1) + '-'
+ addZ(srcEle.firstChild.data);
alert(dateISO);
}
/*************************
Adds a leading zero to single digit numbers
Only used by sayDate function
*************************/
function addZ(x){
return (x<10)?'0'+x:x;
}
/*************************
Displays or hides the calendar
*************************/
function showHideCal(c){
var ele = document.getElementById(c);
if (ele.style)
ele.style.display = (ele.style.display == '')?'none':'';
}
/*************************
Displays the next month - pass the
value to change months (0-11) by:
1 to get next month
-1 to get last month
*************************/
function changeMonth(n){
var x = +selectedMonth+n;
if ( x > 11 ) {
x -= 12;
selectedYear -= -1;
}
if ( x < 0 ) {
x -= -12;
selectedYear -= 1;
}
initCal(selectedYear,x);
}
/*************************
Displays the next year
*************************/
function changeYear(n){
initCal(+selectedYear+n,selectedMonth);
}
</script>
</head>
<body onload="
// If initialising from a server, call using current
// year and month (0-11) e.g. initCal(2005,1);
resetForm();initCal();
">
<button onclick="
showHideCal('mainDiv');
if (this.blur) this.blur();
">Show/hide calendar</button>
<button onclick="resetForm();">Reset
(back to this month)</button>
<br>
<button onclick="changeMonth(-1);">Previous Month</button>
<button onclick="changeMonth(1);">Next Month</button>
<button onclick="changeYear(-1);">Previous Year</button>
<button onclick="changeYear(1);">Next Year</button>
<div class="mainDiv" id="mainDiv" style="display: ;">
<div class="dateLabels">
<div class="monthLabel" id="monthLabel"></div>
<br>
<form name="dateSel" action="">
<select name="monthSel" onchange="
initCal(
this.form.yearSel[this.form.yearSel.selectedIndex].text,
this.selectedIndex
);
">
<!-- month options added by script -->
</select>
<select name="yearSel" onchange="
initCal(
this[this.selectedIndex].text,
this.form.monthSel.selectedIndex
);
">
<!-- year options added by script -->
</select><br>
<a href="#" onclick="
showHideCal('mainDiv'); return false;
">Close</a>
</form>
<div class="dateLabel" style="left:0em">M</div>
<div class="dateLabel" style="left:2em">T</div>
<div class="dateLabel" style="left:4em">W</div>
<div class="dateLabel" style="left:6em">T</div>
<div class="dateLabel" style="left:8em">F</div>
<div class="dateLabel" style="left:10em">S</div>
<div class="dateLabel" style="left:12em">S</div>
<div class="dateHolder" id="dateBlock"></div>
</div>
</body>
</html>
