Add the below code to the <HEAD> section of your page:

<SCRIPT LANGUAGE="JavaScript"> /* Any-Month calendar script- Rob Patrick (rpatrick@mit.edu) Script featured on and available at: http://www.javascriptkit.com/ */ function setToday() { var now = new Date(); var day = now.getDate(); var month = now.getMonth(); var year = now.getYear(); if (year < 2000) // Y2K Fix, Isaac Powell year = year + 1900; // http://onyx.idbsu.edu/~ipowell this.focusDay = day; document.calControl.month.selectedIndex = month; document.calControl.year.value = year; displayCalendar(month, year); } function isFourDigitYear(year) { if (year.length != 4) { alert ("Sorry, the year must be four-digits in length."); document.calControl.year.select(); document.calControl.year.focus(); } else { return true; } } function selectDate() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; displayCalendar(month, year); } } function setPreviousYear() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; year--; document.calControl.year.value = year; displayCalendar(month, year); } } function setPreviousMonth() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; if (month == 0) { month = 11; if (year > 1000) { year--; document.calControl.year.value = year; } } else { month--; } document.calControl.month.selectedIndex = month; displayCalendar(month, year); } } function setNextMonth() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; if (month == 11) { month = 0; year++; document.calControl.year.value = year; } else { month++; } document.calControl.month.selectedIndex = month; displayCalendar(month, year); } } function setNextYear() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; year++; document.calControl.year.value = year; displayCalendar(month, year); } } function displayCalendar(month, year) { month = parseInt(month); year = parseInt(year); var i = 0; var days = getDaysInMonth(month+1,year); var firstOfMonth = new Date (year, month, 1); var startingPos = firstOfMonth.getDay(); days += startingPos; document.calButtons.calPage.value = " Su Mo Tu We Th Fr Sa"; document.calButtons.calPage.value += "\n --------------------"; for (i = 0; i < startingPos; i++) { if ( i%7 == 0 ) document.calButtons.calPage.value += "\n "; document.calButtons.calPage.value += " "; } for (i = startingPos; i < days; i++) { if ( i%7 == 0 ) document.calButtons.calPage.value += "\n "; if (i-startingPos+1 < 10) document.calButtons.calPage.value += "0"; document.calButtons.calPage.value += i-startingPos+1; document.calButtons.calPage.value += " "; } for (i=days; i<42; i++) { if ( i%7 == 0 ) document.calButtons.calPage.value += "\n "; document.calButtons.calPage.value += " "; } document.calControl.Go.focus(); } function getDaysInMonth(month,year) { var days; if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31; else if (month==4 || month==6 || month==9 || month==11) days=30; else if (month==2) { if (isLeapYear(year)) { days=29; } else { days=28; } } return (days); } function isLeapYear (Year) { if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); } } // End --> </SCRIPT>

Add the below code to the <BODY> section of your page:

<big>Select-A-Month</big> <FORM NAME="calControl" onSubmit="return false;"> <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0> <TR><TD COLSPAN=7> <SELECT NAME="month" onChange="selectDate()"> <OPTION>January</OPTION> <OPTION>February</OPTION> <OPTION>March</OPTION> <OPTION>April</OPTION> <OPTION>May</OPTION> <OPTION>June</OPTION> <OPTION>July</OPTION> <OPTION>August</OPTION> <OPTION>September</OPTION> <OPTION>October</OPTION> <OPTION>November</OPTION> <OPTION>December</OPTION> </SELECT> <INPUT NAME="year" TYPE=TEXT SIZE=4 MAXLENGTH=4> <INPUT TYPE="button" NAME="Go" value="Build!" onClick="selectDate()"> </TD> </TR> </FORM> <FORM NAME="calButtons"> <TR><TD><textarea FONT="Courier" NAME="calPage" WRAP=no ROWS=8 COLS=22></textarea></TD><TR><TD> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" << " onClick="setPreviousYear()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" < " onClick="setPreviousMonth()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE="Today" onClick="setToday()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" > " onClick="setNextMonth()"> <INPUT TYPE=BUTTON NAME="previousYear" VALUE=" >> " onClick="setNextYear()"> </TD></TR> </TABLE></FORM></FONT> <p align="center"><font face="arial" size="-2">This free script provided by<br> <a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

Finally, add the below OnLoad into the <BODY> tag itself:

<BODY onLoad="setToday()">

Example:

Select-A-Month