<html>
<head>
<title></title>
</head>
<body>
<form action="?" name="birth-date">
<select name="year">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008 (leap)</option>
<option value="2009">2009</option>
<option value="20010">2010</option>
</select>
<select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">Octomber</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day"></select>
</form>
<script type="text/javascript">
(function () {
var
form = document.forms['birth-date'],
elements = form.elements,
monthDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
fillDays = function ( options, from, to ) {
for( var i = from; i <= to; i++ ) {
options[i-1] = new Option( i, i );
}
},
bindSelect = function ( o, f ) {
o.onchange = f;
},
onChange = function () {
var
month = elements['month'],
year = elements['year'],
select = elements['day'],
options = select.options;
return function () {
var
daysInMonth = monthDays[ month.selectedIndex ],
length = options.length;
// February on a leap year
if( month.selectedIndex == 1 && Date.prototype.is_leap( year.value ) ) {
daysInMonth = 29;
}
options.length = daysInMonth;
fillDays( options, length, daysInMonth );
}
}();
// Fill days for January
fillDays( elements['day'].options, 1, 31 );
// Leap year
if( typeof Date.prototype.is_leap !== 'function' ) {
Date.prototype.is_leap = function( year ) {
if( !year )
var year = this.getFullYear();
return ( year % 4 === 0 && year % 100 !== 0 ) || year % 400 === 0;
}
}
// Month onchange
bindSelect( elements['month'], onChange );
// Year onchange
bindSelect( elements['year'], onChange );
}());
</script>
</body>
</html>