Day Month Year selector

by Parker

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<select id="calMonthDropdown"></select>
<select id="calYearDropdown"></select>

JavaScript

var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(monthfield, yearfield){
    var today=new Date();
    var monthfield=document.getElementById(monthfield);
    var yearfield=document.getElementById(yearfield);
    
    for (var m=0; m<12; m++) {
        monthfield.options[m]=new Option(monthtext[m], monthtext[m]);
        monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true);
    }
    var thisyear=today.getFullYear();
    for (var y=0; y<20; y++){
        yearfield.options[y]=new Option(thisyear, thisyear);
        thisyear+=1;
    }
    yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true);
}

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
$(document).ready(function (){
    populatedropdown("calMonthDropdown", "calYearDropdown");
});