JavaScript

See More About:

Date Selector

2. The Script

More of this Feature

The first thing you need to do to install the date selector is to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called calendar.js.

// Date Selector
// copyright Stephen Chapman, 11th March 2006, 30th October 2006

var headbg = '#cccccc';  // table heading background colour
var todaybg = '#99cccc'; // current day of month background colour
var textclr = '#009999'; // text colour

// permission is granted to use this javascript provided that the below code is not altered
var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);}
function monthlength(month,year) {var dd = new Date(year, month, 0);return dd.getDate();}
var moy = ['January','February','March','April','May','June','July','August','September','October','November','December'];
function dispCal(yy,mm) {if (mm < 0 || mm > 12) {alert('month must be between 1 and 12'); return false;} if (yy != 0 && (yy < 1901 || yy > 2100)) {alert('year must be after 1900 and before 2101'); return false;} var dow = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; var calendar = new Date();  var today = calendar.getDate(); calendar.setDate(1); if (yy > 1900) calendar.setFullYear(yy); if (mm > 0) calendar.setMonth(mm - 1); var yy = year = calendar.getFullYear(); var month = calendar.getMonth(); calendar.setDate(today); var weekday = calendar.getDay(); var daysInMonth = monthlength(month+1,year); var hilite_start = '<td width="30" style="background:' + todaybg + '" align="center"><b>'; var td_start = '<td width="30" align="center">'; var cal = '<div id="cal"><div style="border:1pt solid #cccccc;height:150px;width:238px"><table border="0" cellspacing="0" cellpadding="2"><tr><td colspan="7" style="background:' + headbg + '" align="center"><b>' + moy[month]  + ' ' + year + '<\/b><\/td><\/tr><tr>'; for(dex=0; dex < 7; dex++) {if(weekday == dex) cal += td_start + '<b>' + dow[dex] + '<\/b><\/td>'; else cal += td_start + dow[dex] + '</td>';} cal += '<\/tr><tr>'; var day2 = today; for (dex = today; dex > 6; dex -=7) day2 = dex; weekday -= day2 - 1; while (weekday < 0) weekday += 7; for(dex=0; dex < weekday; dex++) cal += td_start + ' <\/td>'; for(dex=1; dex <= daysInMonth; dex++) {if(weekday == 7) {cal += '</tr><tr>'; weekday = 0;} if(today==dex) cal += hilite_start +'<a style="text-decoration:none;color:'+textclr+'" href="#" onclick="setDate(' + dex + ',' + month + ',' + year + ')">' + dex + '<\/a><\/b><\/td>'; else cal += td_start + '<a style="text-decoration:none;color:'+textclr+'" href="#" onclick="setDate(' + dex + ',' + month + ',' + year + ')">' + dex + '<\/a><\/td>'; weekday += 1;} for(dex=weekday; dex < 7; dex++) cal += td_start + ' <\/td>'; cal += '<\/tr><\/table><\/div>';
if (document.getElementById) {var mmb = month;  mm = month + 1; var yya = yyb = yy; if (mmb <1) {mmb += 12; yyb--;} var mma = month + 2; if (mma > 12) {mma -= 12; yya++;} var yb = yy -1; var ya = yy +1; cal += '<table border="0" cellspacing="0" cellpadding="2" width="210"><tr><td><a href="#" onclick="if (cala = dispCal('+yb+','+mm+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}"><<</a></td><td><a href="#" onclick="if (cala = dispCal('+yyb+','+mmb+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}"><</a></td><td align="right"><a href="#" onclick="if (cala = dispCal('+yya+','+mma+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}">></a></td><td align="right"><a href="#" onclick="if (cala = dispCal('+ya+','+mm+')) {document.getElementById(\'cal\').innerHTML = cala; return false;}">>></a></td></tr></table>';} else {cal += '<div> </div>';} cal += '</div>'; return cal;}
function start() {document.getElementById('calendar').innerHTML = dispCal(0,0);}
loaded('calendar',start);
function setDate(dayVal,monthVal,yearVal) {document.getElementById('calDate').value = dayVal + ' ' + moy[monthVal] + ' ' + yearVal;}

You next attach the script into your web page by adding the following code into the head section of your page.

The next step is to add it to the form

Introduction | The Script | Add to Form

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Make Meals Easy
An easy way to put delicious meals together.
Build Your Business
Get tips on starting up and staying competitive.
Love Your Living Space
Achieve your dream home with advice from the pros.
Financial Planning
Stay on top with our smart financial tips.

Browse All About.com

JavaScript

See More About:

Date Selector

2. The Script

More of this Feature

Explore JavaScript

Must Reads

Most Popular

See More About:

By Category

About.com Special Features

Make Meals Easy

Build Your Business

Love Your Living Space

Financial Planning

JavaScript

JavaScript

See More About:

Date Selector

2. The Script

More of this Feature

Related Articles

Explore JavaScript

Must Reads

Most Popular

See More About:

By Category

About.com Special Features

Make Meals Easy

Build Your Business

Love Your Living Space

Financial Planning

JavaScript

Add to: