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.





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 !="") {

document.myForm.days.options.length = 0
for(i=0;i<monthDays[theMonth];i++) {
document.myForm.days.options[i] = new Option(i+1)

// Script by
// If you are using this code please leave a link to
// End hiding script from older browsers -->

<Under the body section>

<form action="#" name="myForm">
<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 name="days">

<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>


Please let me know if this script was helpful to you.