Create month and year dropdown list using JavaScript

by  
Share:
month year day

In my last post I have given the code to Create month and year dropdown list using php. But I thought why not try to do the same with JavaScript. So i just coded and sharing the snippet to Create month and year dropdown list using JavaScript.

Create year dropdown list

First of all create a dropdown and assign an ID to it. Assigning an ID is very important. I have given year as id.

<select name="year" id="year">
    <option value="">Select Year</option>
</select>

At the bottom of the page add this snippet. It will loop over the year and dynamically append it to the year dropdown.
<script type="text/javascript">
for(y = 2000; y <= 2500; y++) {
        var optn = document.createElement("OPTION");
        optn.text = y;
        optn.value = y;
        
        // if year is 2015 selected
        if (y == 2015) {
            optn.selected = true;
        }
        
        document.getElementById('year').options.add(optn);
}
</script>

Create month dropdown list

Going through the same process as we did in year dropdown. First create a dropdown and assign ID to it. I have given month in my case.

<select name="month" id="month">
    <option value="">Select Month</option>
</select>

Add this script below the dropdown or at the bottom of the page to add month options dynamically to the month dropdown.
<script type="text/javascript">
var d = new Date();
var monthArray = new Array();
monthArray[0] = "January";
monthArray[1] = "February";
monthArray[2] = "March";
monthArray[3] = "April";
monthArray[4] = "May";
monthArray[5] = "June";
monthArray[6] = "July";
monthArray[7] = "August";
monthArray[8] = "September";
monthArray[9] = "October";
monthArray[10] = "November";
monthArray[11] = "December";
for(m = 0; m <= 11; m++) {
    var optn = document.createElement("OPTION");
    optn.text = monthArray[m];
    // server side month start from one
    optn.value = (m+1);

    // if june selected
    if ( m == 5) {
        optn.selected = true;
    }

    document.getElementById('month').options.add(optn);
}
</script>

If you have any other tricks or suggestion to optimize this code please share with us.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Chris on

for( var m = 0; m <= 11; m++) {

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.