Calendar ddl autoupdate day based on month
SOURCE: http://javascript.about.com/library/bldateselect.htm
by Annie Lagang
HTML
<form name="myform"><fieldset>
<legend>Date Selection</legend>
<label for="year">Year: </label><select name="year" id="year" size="1">
<option value=" " selected="selected"> </option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
<label for="month">Month: </label><select name="month" id="month" size="1">
<option value=" " selected="selected"> </option>
<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">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="day">Day: </label><select name="day" id="day" size="1">
<option value=" " selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</fieldset></form>
<p><span>SOURCE:...
JavaScript
function daysInMonth(month,year) {
var dd = new Date(year, month, 0);
return dd.getDate();
}
function setDayDrop(dyear, dmonth, dday) {
var year = dyear.options[dyear.selectedIndex].value;
var month = dmonth.options[dmonth.selectedIndex].value;
var day = dday.options[dday.selectedIndex].value;
if (day == ' ') {
var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month,year);
dday.options.length = 0;
dday.options[dday.options.length] = new Option(' ',' ');
for (var i = 1; i <= days; i++)
dday.options[dday.options.length] = new Option(i,i);
}
}
function setDay() {
var year = document.getElementById('year');
var month = document.getElementById('month');
var day = document.getElementById('day');
setDayDrop(year,month,day);
}
document.getElementById('year').onchange = setDay;
document.getElementById('month').onchange = setDay;