
JavaScript Drop-Down Date Picker
This script will allow a user to select a date while completing a form. When a user picks a month, the script populates the second pop-up menu with the correct number of days for the selected month.
In February this JavaScript Date Selector contains 29 days. This is because of the leap year in 2008. I will release an update for this script soon.
Example
Script Source
You need to put the following into the <body> tag of your page:
<body onload="document.myForm.months.selectedIndex=0">
<Under the head section>
<script language="Javascript" type="text/javascript">
<!-- Hide script from older browsers
monthDays = new Array(31,29,31,30,31,30,31,31,30,31,30,31)
function populateDays(monthChosen) {
monthStr = monthChosen.options[monthChosen.selectedIndex].value
if (monthStr !="") {
theMonth=parseInt(monthStr)
document.myForm.days.options.length = 0
for(i=0;i<monthDays[theMonth];i++) {
document.myForm.days.options[i] = new Option(i+1)
}
}
}
// Script by www.wizzardweb.co.uk
// If you are using this code please leave a link to www.wizzardweb.co.uk
// End hiding script from older browsers -->
</script>
<Under the body section>
<form action="#" name="myForm">
<p>
<select name="months" onchange="populateDays(this)">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="days">
<option>Day</option>
</select>
<select name="year">
<option value="">Year</option>
<option value=2007>2007</option>
<option value=2008>2008</option>
<option value=2009>2009</option>
<option value=2010>2010</option>
<option value=2011>2011</option>
</select>
</form>
Please let me know if this script was helpful to you.