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.

View Demo

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>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

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.