View Full Version : Year/Month drop down lists
erypmav
03-20-2006, 06:55 PM
Hello all!
I am trying to create simple JS code for two drop down lists...and I am unable to made anything work. Here are the specs:
On my asp page, I need two drop down lists, the first for a four position year (2006, 2005 , 2004, etc) and the second is for two position month. The hook is that I would like them to dynamically update in relation to the present date. Example...present month and year is 03/06. If I select '2006' from the year drop down - my only options for the month dropdown should be '03', '02', & '01'. Next month (04/06), my options for the month dropdown should be '04', '03', '02', & '01'. If I select '2005' - my options for the month drop down should include all 12 months.
I would like this to update dynamically...with no hard coded dates. The range would be now to 5 years prior.
It seems like it should be easy but I just can't get the darn thing.
Any help would be GREATLY appreciated!
Thanks,
erypmav
Something like that?:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var today = new Date();
var y=today.getFullYear();
var m=today.getMonth();
function fillSel(yy){
var selM = document.getElementById('selm');
while(selM.hasChildNodes()){selM.removeChild(selM.childNodes[0])}
var lim = (Number(yy)==y)?m+1:12;
for(var i=0;i<lim;i++){
var opt = document.createElement('option');
var v=i+1;v=(v<10)?'0'+v:v;
opt.setAttribute('value',v);
opt.appendChild(document.createTextNode(v));
selM.appendChild(opt);
}
}
onload=function(){
var oYear = document.getElementById('sely').options;
for(var i=0;i<oYear.length;i++){
if(Number(oYear[i].value)==y){
fillSel(oYear[i].value);
oYear[i].selected=true;
break}
}
}
</script>
</head>
<body>
<select id="sely" onchange="fillSel(this.value)">
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
<select id="selm"></select>
</body>
</html>
erypmav
03-21-2006, 01:53 PM
KOR,
That is fantastic! You are a real help! This get me up and running.
It might be asking too much...but is there any way to populate the year options without hard coding (and have it work with this). For example, I have other pages where I use only a year and I code something like this:
*in the js page*
var today = new Date();
var year_now = today.getFullYear();
function writeYearOptions(startYear, endYear)
{
var optionCounter;
for (optionCounter = startYear; optionCounter >= endYear; optionCounter--)
{
document.write('<OPTION value=' + optionCounter + '>' + optionCounter);
}
}
*in the body*
<td><select name="YEAR">
<script language=JavaScript>
writeYearOptions(year_now,(year_now-5));
</script>
</select></td>
I'm looking to have this work as the years go on and not have to hard code the year drop down option list.
Either way, I'll be using you code...THANKS!
erypmav
Would't be easier to count backwards starting from the present year? I could dynamically populate the first select object as well, but I don't know exactly your aim... Or you want a separate array in which you might insert the years as well.
I mean ... I guess that you don't need a variable lenght of years, starting from the present year... Or else?
erypmav
03-21-2006, 04:16 PM
Thank you for working with me :)
You are correct, I wish to also dynamically populate the year drop down, starting with the current year down to 4 years prior
Example: right now the year list should drop down 2006, 2005, 2004, 2003, 2002. Next year I wish it to automatically list 2007, 2006, 2005, 2004, 2003. This in addition to the month list being current.
I'll be passing the chosen 4 digit year and the two digit month as parameters to WebFOCUS to create reports.
Thanks again!
erypmav
Will this be ok? (might be shorthened, maybe,, but not time right now):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var today = new Date();
var y=today.getFullYear();
var m=today.getMonth();
var maxY=4;
function fillSel(yy){
var selM = document.getElementById('selm');
while(selM.hasChildNodes()){selM.removeChild(selM.childNodes[0])}
var lim = (Number(yy)==y)?m+1:12;
for(var i=0;i<lim;i++){
var opt = document.createElement('option');
var v=i+1;v=(v<10)?'0'+v:v;
opt.setAttribute('value',v);
opt.appendChild(document.createTextNode(v));
selM.appendChild(opt);
}
}
onload=function(){
var selY = document.getElementById('sely');
var year =y-maxY;
for (var i=maxY; i>=0;i--){
var opt = document.createElement('option');
opt.setAttribute('value',year);
opt.appendChild(document.createTextNode(year));
i==0?opt.selected=true:null;
selY.appendChild(opt);
year++;
}
fillSel(selY.options[selY.options.selectedIndex].value)
}
</script>
</head>
<body>
<select id="sely" onchange="fillSel(this.value)">
</select>
<select id="selm" style="width:50px"></select>
</body>
</html>
erypmav
03-21-2006, 07:18 PM
THANK YOU!!
This works for me...you are the best!
:)
erypmav
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.