Javascript month year dropdown list 1

mialeee30 · Mar 19, 2008

I'm sort of lost on how to populate a drop down list of Month Year going back three years depending on what month and year it currently is. I.e.
March 2008,
Feb 2008 ...etc
March 2005.

BabyJeffy · Mar 19, 2008

Could you post the code you are working with, and a rough outline of what you have already tried.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

mialeee30 · Mar 20, 2008

Here is what I have so far. You can see it is displaying all of the months of 2008 - which I don't want. I want it to be dynamic and display current month+year and back 3 years in a drop down list. Example:

March 2008
Feb 2008
Jan 2008
Dec 2007
..
..
..
March 2005

function writeMonthOptions()
{

var months = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

var date = new Date();
var day = date.getDate();
var month = date.getMonth() ;
var y = date.getYear();
var yy = y-2
var year = (yy < 1000) ? yy + 1900 : yy;

for (t=0; t<3; t++)
{
for (i=0; i<24; i++)
{

if (months[month + i] != undefined)
{

var opt = document.createElement("option");
document.getElementById("Month_list").options.add(opt);
opt.text = months[month + i]+ ' ' + (yy+t);
opt.value = months[month + i]+ ' ' + (yy+t);

}

}
}

}
</script>

kaht · Mar 20, 2008

Out of curiosity, what is the point of this?

Code:

var y = date.getYear();
var yy = y-2
var year = (yy < 1000) ? yy + 1900 : yy;

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

mialeee30 · Mar 20, 2008

var y = date.getYear(); <-- will give me the current year and I want to go back 2 or 3 years from the current year.

When using the method date.getYear(), the value returned by getYear() is not always 4 numbers. 1997 becomes 97 and 2000 is represented by 100.

Bad habit. I should be using getFullYear()

kaht · Mar 20, 2008

Bad habit. I should be using getFullYear()

That's where I was going with the question - it turns your 3 lines of code into 1. [smile]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

mialeee30 · Mar 20, 2008

Right, but it doesn't solve my original question...

tsuji · Mar 20, 2008

>Here is what I have so far. You can see it is displaying all of the months of 2008 - which I don't want. I want it to be dynamic and display current month+year and back 3 years in a drop down list.
What actually do you not like? It is not clear even a listing example.

kaht · Mar 21, 2008

Right, but it doesn't solve my original question...

Sorry, I kinda skipped over that part....

You're going to a lot of trouble with the loops and trying to keep the math straight and checking to make sure you're not accessing array elements that are out of bounds, etc... Instead of going through that mess, let's have the date object do all the work for us:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

var months = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");

function writeMonthOptions() {

   var today = new Date();
   var date = new Date(today);
   date.setFullYear(date.getFullYear() - 3)
   var dropDown = document.getElementById("Month_list");
   var i = 0;
   var optionValues;

   while (today.getTime() >= date.getTime()) {
      optionValues = months[today.getMonth()] + ' ' + today.getFullYear();
      dropDown.options[i++] = new Option(optionValues, optionValues)
      today.setMonth(today.getMonth() - 1);
   }
}

window.onload = writeMonthOptions;

</script>

<style type="text/css"></style>

</head>
<body>

<select id="Month_list"></select>

</body>
</html>

We set up date as a time 3 years prior to today. Then, instead of writing for loops to loop through the elements just use a simple while loop to ensure that today is greater than date. If it is, write out the current month/year contents of today and then decrement it by a month. Repeat the process till today is finally less than date.

On a side note - try to never write code like this inside of a loop if it can be done outside of the loop.

Code:

var dropDown = document.getElementById("Month_list");

It's likely not noticeable in your code since your loop is so small, but getElementById can be a slow method when ran 100s or 1000s of times on your page. getElementById basically has to search to the collection of elements on a page to find one that matches the id parameter supplied. It's much faster to find it once, store a reference to that element in a variable, and then use the variable instead of getElementById.

Like I said, it wouldn't be noticeable on your page cause the loop is so small, but it's a good practice to get into.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

mialeee30 · Mar 21, 2008

Thank you very much!! This is exactly what I was attempting to do. I need to go through the code so I can understand it better. Thanks again!!!

trollacious · Mar 21, 2008

How about clicking on

Thank kaht for this valuable post!

underneath one of his posts to make it official that he's helped you?

Lee

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript month year dropdown list 1

mialeee30

MIS

BabyJeffy

Programmer

mialeee30

MIS

kaht

Programmer

mialeee30

MIS

kaht

Programmer

mialeee30

MIS

tsuji

Technical User

kaht

Programmer

mialeee30

MIS

trollacious

Programmer

Similar threads

Part and Inventory Search

Sponsor