Year and Month Select dropdown Javascript

It's criminally inefficient to struggle with dates / datetimes only via JavaScript. I strongly advice using server side scripting (PHP) to do this.

I need to work in javascript only. No php.

This seems to fix the "week of"  dropdown, but the Start and End dates are not right.

function setDayOrWeek(theForm,year,month) {
  // d = last day in the current month
  var d = new Date(year,month+1,0);
  var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for ( i = 1; i <= daysInMonth; i++ ) {
      d.setDate( i );
      if ( d.getDay() == 1 ) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      } else if ( i == 1 && d.getDay() > 1 ) {
        var monday = new Date( d.getFullYear(), d.getMonth(), 2 - d.getDay() )
        theForm.day.options[theForm.day.options.length++] = new Option("The week of the "+ monday.getDate() +addSuffix(i)+" of " +monthNames[monday.getMonth()],monday.getDate())
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}

Select allOpen in new window

If you need to correct the Start and End dates values, let me know.

yuck... the "30" should be "30th", not "30st"

Yes End date need to be changed.

week is from Monday to sunday.

so Start date should be : 03/30/09
End date should be : 04/05/09

Hi Honor,

Yes week dropdown is working fine. Would you please modify the StartDate and EndDate

I tested couple of dates, Start date and end dates are not wroking fine. Its not working propery if first day of month starts middle of the week.

Examples: dates in bracket are wrong, they are coming currently

1. If Current Date is Jan1, 2009;  
     week dropdown : week of 29 of dec  ---correct
     Start date:    12/29/08                   (01/21/09)  wrong
     End date:      01/06/09                  (02/04/09)

2. If date is April1, 2009
    week is week of 30 of march
    Start date: 03/30/09               (04/30/2009)
    End date: 04/05/09                 (05/06/09)

3. Id date is May1, 2009
    week is week of 27 of march
    Startdate:04/27/09                  (05/27/09)
     End date: 05/03/09                 (06/02/09)

4. If week is Jul1, 2009
     week of 29st of june
     start date: 06/29/09               ( 07/29/09)
     Enddate: 07/05/09                  (08/04/09)

Please fix the code for startdate and enddate


 

Hi Honor,

Would you please fix the code for start date and end date. Also, for
Week of 30th of march. Would you please change 30st to 30th.

Thanks

These appear to correct the suffix issue.

Replace "function addSuffix()" with the following code,
and change

this line:

theForm.day.options[theForm.day.options.length++] = new Option("The week of the "+ monday.getDate() +addSuffix(i)+" of " +monthNames[monday.getMonth()],monday.getDate())

to:

theForm.day.options[theForm.day.options.length++] = new Option("The week of the "+ monday.getDate() +addSuffix( monday.getDate() )+" of " +monthNames[monday.getMonth()],monday.getDate())



I'll take a look at the Start & end dates a little later.  I have to drive home now.

function addSuffix( dom ) {
  function set() {
    var result = {}
    for ( var i = 0; i < arguments.length; i++ ) {
      result[ arguments[ i ] ] = true
    }
    return result
  }
  return ( dom in set( 1, 21, 31 ) ) ? 'st' :
         ( dom in set( 2, 22 ) ) ? 'nd' :
         ( dom in set( 3, 23 ) ) ? 'rd' : 'th'
}

Select allOpen in new window

Thanks a lot for all help.

One of the things I like about reading Michel's code is that I frequently learn something. :-)

I, now, see what he was trying to do with the addSuffix() routine.  :-)
and think that it would be better to replace the code above with this.

Note that this returns the value, with the appropriate suffix, instead of just the suffix.  This lets this code:

theForm.day.options[theForm.day.options.length++] = new Option("The week of the "+ monday.getDate() +addSuffix( monday.getDate() )+" of " +monthNames[monday.getMonth()],monday.getDate())

be replaced by this (which I think you'll agree is simpler):

theForm.day.options[theForm.day.options.length++] = new Option("The week of the "+ withSuffix( monday.getDate() ) +" of " +monthNames[monday.getMonth()],monday.getDate())

ok, now back to the start and end date problem...

var suf = 'th,st,nd,rd'.split(',')
function withSuffix( dom ) {
  var pad  = ' ' + dom
  var len  = pad.length
  var tens = pad.substr( len - 2, 1 )
  var ones = pad.substr( len - 1 )
  return dom + ( ( tens == '1' ) ? 'th' : suf[ ones ] ? suf[ ones ] : "th" )
}

Select allOpen in new window

I'm having quite a challenge with this one.  :-)

Do you have the specification details for how the drop down selection lists are supposed to be populated?  That might help me.

Hi,

Its not working properly.

What I want is when page loads, current year, month and current week is selected. Current week means week start from monday to sunday. Also, Start Date==Date of Monday ; and End Date: Date of Sunday for current week should display on page load

Now user can select any month, depending upon the month any week can be selected. Then click on submit which change the Start date and end date.

For 1April 2009, year and week dropdown will have correct value, But
Problem Month dropdown will have MARCH selected. It should be April.

2. If suppose April 30, 2009  Week dropdown is fine,
Problem: Month dropdown will have March selected;  Start date:03/27/09   End date: 04/02/09

Month dropdown is not working properly.

Thanks

Thanks for the clarifications.

Hi Honor,

Would you please fix the Month dropdown issue.

For 1April 2009, year and week dropdown will have correct value, But
PROBLEM Month dropdown will have MARCH selected. It should be April.

2. If suppose April 30, 2009  Week dropdown is fine,
Problem: Month dropdown will have March selected;  Start date:03/27/09   End date: 04/02/09

Month dropdown is not working properly.

I'm trying, but at the moment, I'm working on my day job.  :-)

Hi Honor,

Whenever you have time, please fix the start date and end date.

Hi Honor,

Start Date and end Date is not having the correct values when week is divided into two months:

1. April week of March 30, year 2009 is selected. Click on Button will get start date 4/30/09  end date 05/06/09

2. May, week of April 27 year 2009 is selected, start date 5/27/09   end date 6/02/09

3. Dec, week of nov 30 , 2009 is selected and hit submit, start date ---dec 30 end date jan5.


Please fix the start date and end date for the weeks divided into two months.
Thanks

Hi Honor,

Please see the below code. Everything is working fine except the start date and end date in case of weeks divided in two months.

Like for current week, Month april, week of march 30, 2009 is selected. Start and end date is wrong. Please make the changes in the code to fix it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
	var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
		var yearAdjustment=0; // how many years prior to this year
		var numberOfYears =2; // how many years in the dropdown
		var yearsDescending = true; // count down = true, up = false
		var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
		var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
		var suf = "th,st,nd,rd".split(',')
 
		function setDate(theForm) 
				{
					var year = theForm.year.options[theForm.year.selectedIndex].value
					var month = theForm.month.selectedIndex
					setDayOrWeek(theForm,year,month)
					reportDay(theForm)
				}//setDate
 
		function addSuffix( dom ) 
			{
  				function set() 
  					{
    					var result = {}
    					for ( var i = 0; i < arguments.length; i++ ) 
    						{
      							result[ arguments[ i ] ] = true
    						}
    					return result
  					}
  					return ( dom in set( 1, 21, 31 ) ) ? 'st' :
         				( dom in set( 2, 22 ) ) ? 'nd' :
         				( dom in set( 3, 23 ) ) ? 'rd' : 'th'
			}
 
		function reportDay(theForm,submitting) 
			{
				var yyyy = theForm.year.value;
				var mm = theForm.month.selectedIndex;
				var dates=new Array();
				var day = theForm.day.value;
				var startDate = new Date(yyyy,mm,day,0,0,0)
				if (useWeeks) 
					{
						for (var i=0;i<7;i++) 
							{
								dates[i]=startDate.getTime();
								startDate.setDate(startDate.getDate()+1)
							}
					}
				else dates[0]=startDate.getTime();
					show(dates)
					if (submitting) 
						{
							mm+=1; // js months start at 0
							if (mm<10) mm="0"+mm;
							if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
						}
			}//reportDay
 
		function fmtDate(timeStamp) 
			{
				var d = new Date(timeStamp)
				var yy = d.getFullYear().toString().substring(2)
				var mm = d.getMonth()+1;
				if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
				var dd = d.getDate();
				if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
				return ""+mm+"/"+dd+"/"+yy;
			}//fmtDate
 
		function show(dates) 
			{
				var d1 = fmtDate(dates[0])
				var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
				var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
				document.getElementById("datesDiv").innerHTML = text;
				document.getElementById('formdate1').value=d1;
				document.getElementById('formdate2').value=d2;
			}//show
 
		function setDayOrWeek(theForm,year,month) 
			{ 
				var d = new Date(year,month+1,0);
  				var now = new Date();
  				var daysInMonth = d.getDate();
  				theForm.day.options.length=29;// save the minimum days
  				if (useWeeks) 
  					{
    					var selectedWeek = 0;
    					theForm.day.options.length=0;
    					var thisWeek = 0;
    					for ( i = 1; i <= daysInMonth; i++ ) 
    						{
      							d.setDate( i );
      							if ( d.getDay() == 1 ) 
      								{
        								theForm.day.options.length++;
        								theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
      								} 
      							else if ( i == 1 && d.getDay() > 1 ) 
      								{
        								var monday = new Date( d.getFullYear(), d.getMonth(), 2 - d.getDay() )
      									theForm.day.options[theForm.day.options.length++] = new Option("Week of " +monthNames[monday.getMonth()] + " " + monday.getDate() + addSuffix(monday.getDate()) +" ",monday.getDate())
 
									}
      							if (now.getDate()==d.getDate()) 
      								{
        								thisWeek = theForm.day.options.length-1;
     		 						}
    						}
    					theForm.day.selectedIndex=thisWeek
  					}
  			else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) 
  				{
    				theForm.day.options.length++;
    				theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  				}
  			if (now.getFullYear()!=year || now.getMonth() != month) 
  				{
    				theForm.day.selectedIndex=0;
  				}
			}  //setDayOrWeek     
 
			function setNow() 
				{
					var now = new Date()
					var ySel = document.forms[0].year;
					var mSel = document.forms[0].month;
					var dSel = document.forms[0].day;
					
					var year = now.getFullYear();
					
					if (adjustYears) 
						{
							ySel.options.length=0; // remove all 
							var firstYear = year + yearAdjustment;
							if (yearsDescending ) 
								{
									firstYear = year - yearAdjustment;
									for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) 
										{
											ySel.options.length++
											ySel.options[ySel.options.length-1] = new Option(i,i)
										}
								} 
					else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) 
						{
							ySel.options.length++
							ySel.options[ySel.options.length-1] = new Option(i,i)
						}
					}
				var minYear = parseInt(ySel.options[0].value);
				var diff = year-minYear;
				ySel.selectedIndex=((diff)>0)?diff:0;
				mSel.selectedIndex = now.getMonth();
				if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based 
			}//setNow
 
		function resetDate() 
			{
				delCookie('week'); 
			}//resetDate
 
window.onload=function() 
	{ 
		setNow()
		setDate(document.forms[0])
 
		var cookie = getCookie('week');
		if (cookie) 
			{
				var yyyy = cookie.substring(0,4)
				var month = cookie.substring(4,6);
				month-=1; // js months start at 0
				var weekIdx = cookie.substring(6);
				for (var i=0;i<document.forms[0].year.length;i++) 
					{
						if (document.forms[0].year.options[i].value==yyyy) 
							{
								document.forms[0].year.options[i].selected=true;
								break
							}
					}
				setDate(document.forms[0])
				document.forms[0].month.selectedIndex=month;
				setDate(document.forms[0])
				document.forms[0].day.selectedIndex=weekIdx;
			}
			// window.history.forward(1);
		//	OnloadPage();
			
		}
</script>
</head>
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html>  

Select allOpen in new window

ok, I hope (expect) to be able to get to this today.  

Right now, I have to get the kids fed. :-D

Hi Honor,

Would you please fix the code.

Thanks

Hi Honor.

Would you please make the changes in the code so that it will work fine for the weeks belong to two months. Also, please correct the Start date and end dates.

Thanks

Hi Honor,

Its really urgent. Please spare some time to implement the code for fixing the above problems.

thanks

Hello Honor,

Start Date and end Date is not having the correct values when week is divided into two months:

1. April week of March 30, year 2009 is selected. Click on Button will get start date 4/30/09  end date 05/06/09
2. May, week of April 27 year 2009 is selected, start date 5/27/09   end date 6/02/09
3. Dec, week of nov 30 , 2009 is selected and hit submit, start date ---dec 30 end date jan5.

Would you please make the changes in the code so that it will work fine for the weeks belong to two months. Also, please correct the Start date and end dates.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
	var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
		var yearAdjustment=0; // how many years prior to this year
		var numberOfYears =2; // how many years in the dropdown
		var yearsDescending = true; // count down = true, up = false
		var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
		var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
		var suf = "th,st,nd,rd".split(',')
 
		function setDate(theForm) 
				{
					var year = theForm.year.options[theForm.year.selectedIndex].value
					var month = theForm.month.selectedIndex
					setDayOrWeek(theForm,year,month)
					reportDay(theForm)
				}//setDate
 
		function addSuffix( dom ) 
			{
  				function set() 
  					{
    					var result = {}
    					for ( var i = 0; i < arguments.length; i++ ) 
    						{
      							result[ arguments[ i ] ] = true
    						}
    					return result
  					}
  					return ( dom in set( 1, 21, 31 ) ) ? 'st' :
         				( dom in set( 2, 22 ) ) ? 'nd' :
         				( dom in set( 3, 23 ) ) ? 'rd' : 'th'
			}
 
		function reportDay(theForm,submitting) 
			{
				var yyyy = theForm.year.value;
				var mm = theForm.month.selectedIndex;
				var dates=new Array();
				var day = theForm.day.value;
				var startDate = new Date(yyyy,mm,day,0,0,0)
				if (useWeeks) 
					{
						for (var i=0;i<7;i++) 
							{
								dates[i]=startDate.getTime();
								startDate.setDate(startDate.getDate()+1)
							}
					}
				else dates[0]=startDate.getTime();
					show(dates)
					if (submitting) 
						{
							mm+=1; // js months start at 0
							if (mm<10) mm="0"+mm;
							if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
						}
			}//reportDay
 
		function fmtDate(timeStamp) 
			{
				var d = new Date(timeStamp)
				var yy = d.getFullYear().toString().substring(2)
				var mm = d.getMonth()+1;
				if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
				var dd = d.getDate();
				if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
				return ""+mm+"/"+dd+"/"+yy;
			}//fmtDate
 
		function show(dates) 
			{
				var d1 = fmtDate(dates[0])
				var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
				var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
				document.getElementById("datesDiv").innerHTML = text;
				document.getElementById('formdate1').value=d1;
				document.getElementById('formdate2').value=d2;
			}//show
 
		function setDayOrWeek(theForm,year,month) 
			{ 
				var d = new Date(year,month+1,0);
  				var now = new Date();
  				var daysInMonth = d.getDate();
  				theForm.day.options.length=29;// save the minimum days
  				if (useWeeks) 
  					{
    					var selectedWeek = 0;
    					theForm.day.options.length=0;
    					var thisWeek = 0;
    					for ( i = 1; i <= daysInMonth; i++ ) 
    						{
      							d.setDate( i );
      							if ( d.getDay() == 1 ) 
      								{
        								theForm.day.options.length++;
        								theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
      								} 
      							else if ( i == 1 && d.getDay() > 1 ) 
      								{
        								var monday = new Date( d.getFullYear(), d.getMonth(), 2 - d.getDay() )
      									theForm.day.options[theForm.day.options.length++] = new Option("Week of " +monthNames[monday.getMonth()] + " " + monday.getDate() + addSuffix(monday.getDate()) +" ",monday.getDate())
 
									}
      							if (now.getDate()==d.getDate()) 
      								{
        								thisWeek = theForm.day.options.length-1;
     		 						}
    						}
    					theForm.day.selectedIndex=thisWeek
  					}
  			else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) 
  				{
    				theForm.day.options.length++;
    				theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  				}
  			if (now.getFullYear()!=year || now.getMonth() != month) 
  				{
    				theForm.day.selectedIndex=0;
  				}
			}  //setDayOrWeek     
 
			function setNow() 
				{
					var now = new Date()
					var ySel = document.forms[0].year;
					var mSel = document.forms[0].month;
					var dSel = document.forms[0].day;
					
					var year = now.getFullYear();
					
					if (adjustYears) 
						{
							ySel.options.length=0; // remove all 
							var firstYear = year + yearAdjustment;
							if (yearsDescending ) 
								{
									firstYear = year - yearAdjustment;
									for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) 
										{
											ySel.options.length++
											ySel.options[ySel.options.length-1] = new Option(i,i)
										}
								} 
					else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) 
						{
							ySel.options.length++
							ySel.options[ySel.options.length-1] = new Option(i,i)
						}
					}
				var minYear = parseInt(ySel.options[0].value);
				var diff = year-minYear;
				ySel.selectedIndex=((diff)>0)?diff:0;
				mSel.selectedIndex = now.getMonth();
				if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based 
			}//setNow
 
		function resetDate() 
			{
				delCookie('week'); 
			}//resetDate
 
window.onload=function() 
	{ 
		setNow()
		setDate(document.forms[0])
 
		var cookie = getCookie('week');
		if (cookie) 
			{
				var yyyy = cookie.substring(0,4)
				var month = cookie.substring(4,6);
				month-=1; // js months start at 0
				var weekIdx = cookie.substring(6);
				for (var i=0;i<document.forms[0].year.length;i++) 
					{
						if (document.forms[0].year.options[i].value==yyyy) 
							{
								document.forms[0].year.options[i].selected=true;
								break
							}
					}
				setDate(document.forms[0])
				document.forms[0].month.selectedIndex=month;
				setDate(document.forms[0])
				document.forms[0].day.selectedIndex=weekIdx;
			}
			// window.history.forward(1);
		//	OnloadPage();
			
		}
</script>
</head>
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html> 

Select allOpen in new window

Something like this perhaps?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> Date Dropdown </title>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="../objDisplay.js"></script>
<script type="text/javascript">
  var adjustYears     = true  // fix the year drop down to be around now. If false, years must be hardcoded in form
  var yearAdjustment  = 0     // how many years prior to this year
  var numberOfYears   = 2     // how many years in the dropdown
  var yearsDescending = true  // count down = true, up = false
  var useWeeks        = true  // true uses weeks, false uses days in the day dropdown
 
  var monthNames = 'January,February,March,April,May,June,July,August,September,October,November,December'.split( ',' )
  var suf = 'th,st,nd,rd'.split( ',' )
 
  //----------------------------------------------------------------------------
  // Name: setDate()
  // Role: Using current form values, populate the day (week) option list, &
  //       display starting & optional end dates.
  //----------------------------------------------------------------------------
  function setDate( theForm ) {
    var year  = theForm.year.options[ theForm.year.selectedIndex ].value
    var month = theForm.month.selectedIndex
    setDayOrWeek( theForm, year, month )    // Populate day (week) option list
    reportDay( theForm )                    // Update starting & optional end dates
  } // setDate()
 
  //----------------------------------------------------------------------------
  // Name: dateAndSuffix()
  // Role: Given a day of the month (dom), return that day value with the
  //       proper suffix, and padded on front & back with a space.
  // e.g.: dateAndSuffix( 1 ) ==> ' 1st '
  //----------------------------------------------------------------------------
  function dateAndSuffix( dom ) {
    function set() {
      var result = {}
      for ( var i = 0; i < arguments.length; i++ ) {
        result[ arguments[ i ] ] = true
      }
      return result
    }
    return ( ' ' + dom ) + (
                             ( dom in set( 1, 21, 31 ) ) ? 'st' :
                             ( dom in set( 2, 22 ) ) ? 'nd' :
                             ( dom in set( 3, 23 ) ) ? 'rd' : 'th'
                           ) + ' '
  }
 
  //----------------------------------------------------------------------------
  // Name: D2()
  // Role: Given a numeric value, prepend a '0' if that value is only 1 digit
  // Note: Minimum checking is performed. Valid (i.e., 1, or 2 digit) values
  //       are expected.
  //----------------------------------------------------------------------------
  function D2( val ) {
    return ( val < 10 ) ? '0' + val : val
  }
 
  //----------------------------------------------------------------------------
  // Name: reportDay()
  // Role: Use the selected year and month, to update the starting & ending dates
  //----------------------------------------------------------------------------
  function reportDay( theForm, submitting ) {
    var yyyy  = theForm.year.value          // Selected ? year
    var mm    = theForm.month.selectedIndex // Selected month index
    var dates = new Array()                 //
    var day   = theForm.day.value           // Day (week) value
    var startDate = new Date()
    startDate.setTime( day )
    if ( useWeeks ) {                       // Use weeks, not days in month
      //------------------------------------------------------------------------
      // The loop is used to build a array of 7 values, each of which represents
      // the "number of milliseconds since midnight on Jan 1, 1970".  Which
      // means that each (integer) value represents a specific date.
      //------------------------------------------------------------------------
      for ( var i = 0; i < 7; i++ ) {
        dates[ i ] = startDate.getTime()
        startDate.setDate( startDate.getDate() + 1 )
      }
    } else {
      dates[ 0 ] = startDate.getTime()
    }
    show( dates )                           // Display starting & optional ending dates
    if ( submitting ) {
      mm = D2( mm + 1 )
      if ( setCookie ) {
        setCookie( 'week', yyyy + '' + mm + '' + theForm.day.selectedIndex )
      }
    }
  }//reportDay
 
  //----------------------------------------------------------------------------
  // Name: fmtDate()
  // Role: Convert given date into mm/dd/yy string
  //----------------------------------------------------------------------------
  function fmtDate( timeStamp ) {
    var d  = new Date( timeStamp )
    var yy = ( '' + d.getFullYear() ).substring( 2 ) // i.e., last 2 digits
    var mm = D2( d.getMonth() + 1 )
    var dd = D2( d.getDate() )
    return mm + '/' + dd + '/' + yy
  } //fmtDate
 
  //----------------------------------------------------------------------------
  // Name: show()
  // Role: Format the given date(s) into a starting & optional ending date
  //----------------------------------------------------------------------------
  function show( dates ) {
    var d1 = fmtDate( new Date().setTime( dates[ 0 ] ) )
    var d2 = ( dates.length > 1 ) ? fmtDate( new Date().setTime( dates[ dates.length - 1 ] ) ) : ''
    var text = 'Start date: ' + d1 + ( ( dates.length == 1 ) ? '' : '<br\/>End date: ' + d2 )
    document.getElementById( 'datesDiv'  ).innerHTML = text
    document.getElementById( 'formdate1' ).value = d1
    document.getElementById( 'formdate2' ).value = d2
  } // show()
 
  //----------------------------------------------------------------------------
  // Name: setDayOrWeek()
  // Role: Populate the day (week) option list, and select the desired option.
  //----------------------------------------------------------------------------
  function setDayOrWeek( theForm, year, month ) {
    var d   = new Date( year, month + 1, 0 ) // Last day of specified month
    var now = new Date()                    // Current date
    var daysInMonth = d.getDate()           // Number of days in specified month
    theForm.day.options.length = 29         // save the minimum days
    if ( useWeeks ) {                       // Use weeks, not days in month
      var selectedWeek = 0                  // Default selected week #
      theForm.day.options.length = 0        // Clear the day (week) select list
      var thisWeek = 0                      // 1st (zeroth) week of month
      //------------------------------------------------------------------------
      // Process each day of the month, and locate the associated "weeks", where
      // each week is defined to start on a Monday.
      // Note: If the 1st of the month falls after Monday, the 1st week of the
      //       month starts on the preceeding Monday.
      //------------------------------------------------------------------------
      for ( var i = 1; i <= daysInMonth; i++ ) {
        d.setDate( i )                      // Current month & year, but day of month == i
        if ( d.getDay() == 1 ) {            // Is this a Monday?
          theForm.day.options[ theForm.day.options.length++ ] = new Option( "Week of " + monthNames[ month ] + dateAndSuffix( i ), d.getTime() )
        } else {
          if ( i == 1 && d.getDay() > 1 ) { // If the 1st is after Monday, handle it.
            var monday = new Date( d.getFullYear(), d.getMonth(), 2 - d.getDay() )
            theForm.day.options[ theForm.day.options.length++ ] = new Option( "Week of " + monthNames[ monday.getMonth() ] + dateAndSuffix( monday.getDate() ), monday.getTime() )
          }
        }
        //----------------------------------------------------------------------
        // Is "today" the day of the month being processed?
        // If so, set "thisWeek" accordingly, otherwise, it defaults to the 1st
        // week in the month.
        //----------------------------------------------------------------------
        if ( now.getDate() == d.getDate() ) {
          thisWeek = theForm.day.options.length - 1
        }
      }
      theForm.day.selectedIndex = thisWeek
    } else {
      // Why is this here?
      if ( daysInMonth > 28 ) {
        for ( i = 29; i <= daysInMonth; i++ ) {
          theForm.day.options[ theForm.day.options.length++ ] = new Option( i, new Date( year, month, i ).getTime() )
        }
      }
    }
    // Why is this here?
    if ( now.getFullYear() != year || now.getMonth() != month ) {
      theForm.day.selectedIndex = 0
    }
  } // setDayOrWeek()
 
  //----------------------------------------------------------------------------
  // Name: setNow()
  // Role: Dynamically build the year dropdown select list, and select the year,
  //       month, and day (week) entries based upon today's date.
  //----------------------------------------------------------------------------
  function setNow() {
    var now  = new Date()
    var ySel = document.forms[ 0 ].year     // year  field
    var mSel = document.forms[ 0 ].month    // month field
    var dSel = document.forms[ 0 ].day      // day (or week) field
 
    var year = now.getFullYear()            // current year; e.g., 2009
 
    //--------------------------------------------------------------------------
    // If ( adjustYears == true ) {
    //   ... fix the year drop down to be around the current year.
    // } else {
    //   years must be hardcoded in form
    // }
    //--------------------------------------------------------------------------
    if ( adjustYears ) {
      ySel.options.length = 0               // remove all existing years...
      var firstYear = year + yearAdjustment // starting year
      if ( yearsDescending ) {              // Should the years count down?
        firstYear = year - yearAdjustment
        for ( var i = firstYear, n = firstYear - numberOfYears; i >= n; i-- ) {
          ySel.options[ ySel.options.length++ ] = new Option( i, i )
        }
      } else {
        for ( var i = firstYear, n = firstYear + numberOfYears; i < n; i++ ) {
          ySel.options[ ySel.options.length++ ] = new Option( i, i )
        }
      }
    }
    //--------------------------------------------------------------------------
    // Determine which year, month, and day (week) elements to select
    //--------------------------------------------------------------------------
    var minYear = parseInt( ySel.options[ 0 ].value )
    var diff    = year - minYear
    ySel.selectedIndex=( ( diff ) > 0 ) ? diff : 0
    mSel.selectedIndex = now.getMonth()
    if ( !useWeeks ) {
      dSel.selectedIndex = now.getDate() - 1  // NB: Now 0 based
    }
  } //setNow
 
  //----------------------------------------------------------------------------
  // Name: pick()
  // Role: Delete the "week" cookie
  //----------------------------------------------------------------------------
  function pick( obj ) {
    if ( obj ) {
      if ( obj.nodeName == 'SELECT' ) {
        var val = obj.options[ obj.selectedIndex ].value
        var startDate = new Date()
        startDate.setTime( val )
        dates = new Array( 7 )
        for ( var i = 0; i < 7; i++ ) {
          dates[ i ] = startDate.getTime()
          startDate.setDate( startDate.getDate() + 1 )
        }
        show( dates )
      } else {
        alert( 'pick(): select element expected, but ' + obj.nodeName + ' provided.' )
      }
    } else {
      alert( 'pick(): require element missing.' )
    }
  } // pick()
 
  //----------------------------------------------------------------------------
  // Name: resetDate()
  // Role: Delete the "week" cookie
  //----------------------------------------------------------------------------
  function resetDate() {
    delCookie( 'week' )
  } // resetDate()
 
  //----------------------------------------------------------------------------
  // Name: anonymous onload function
  // Role: Initialize select option lists, plus start & optional end dates
  //----------------------------------------------------------------------------
  window.onload = function() {
    setNow()                                // Populate & select year, month & day (week) entries
    setDate( document.forms[ 0 ] )          // & populate select option lists & start/end dates
 
    var cookie = getCookie( 'week' )
    if ( cookie ) {
      var yyyy  = cookie.substring( 0, 4 )
      var month = cookie.substring( 4, 6 )
      month    -= 1  // JavaScript months start at 0; i.e., Jan = 0, Feb = 1
      var weekIdx = cookie.substring( 6 )
      for ( var i = 0; i < document.forms[ 0 ].year.length; i++ ) {
        if ( document.forms[ 0 ].year.options[ i ].value == yyyy ) {
          document.forms[ 0 ].year.options[ i ].selected = true
          break
        }
      }
      setDate( document.forms[ 0 ] )        // Updating the year can affect the month
      document.forms[ 0 ].month.selectedIndex = month
      setDate( document.forms[ 0 ] )        // Updating the year & month can affect the dates
      document.forms[ 0 ].day.selectedIndex = weekIdx
    }
    // window.history.forward(1)
    //  OnloadPage()
  }
</script>
</head>
 
<body>
  <form onSubmit='reportDay(this,true); ' method='post'>
    <input type='hidden' id='Hidden1' name='formdate1' />
    <input type='hidden' id='Hidden2' name='formdate2' />
    <select name='year'  onChange='setDate(this.form)'></select>
    <select name='month' onChange='setDate(this.form)'>
      <option value='1'>Jan</option>
      <option value='2'>Feb</option>
      <option value='3'>Mar</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>Aug</option>
      <option value='9'>Sep</option>
      <option value='10'>Oct</option>
      <option value='11'>Nov</option>
      <option value='12'>Dec</option>
    </select>
    <select name='day' onChange='pick(this)'><!-- Use all days to help NS4 -->
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
      <option value='6'>6</option>
      <option value='7'>7</option>
      <option value='8'>8</option>
      <option value='9'>9</option>
      <option value='10'>10</option>
      <option value='11'>11</option>
      <option value='12'>12</option>
      <option value='13'>13</option>
      <option value='14'>14</option>
      <option value='15'>15</option>
      <option value='16'>16</option>
      <option value='17'>17</option>
      <option value='18'>18</option>
      <option value='19'>19</option>
      <option value='20'>20</option>
      <option value='21'>21</option>
      <option value='22'>22</option>
      <option value='23'>23</option>
      <option value='24'>24</option>
      <option value='25'>25</option>
      <option value='26'>26</option>
      <option value='27'>27</option>
      <option value='28'>28</option>
      <option value='29'>29</option>
      <option value='30'>30</option>
      <option value='31'>31</option>
    </select>
    <br />
    <input type='submit' />
  </form>
<hr />
<div id='datesDiv'></div>
<div id='debug'></div>
</body>
</html>

Select allOpen in new window

oops, you don't need line 6

i.e.,

<script type="text/javascript" src="../objDisplay.js"></script>

It contains some functions that I use to help debug

Have you had a chance to try it?

Hi Honor,

It works perfectly. But there is a slight change in the requirement. Now what I want is
1. If in case of partial first week, like
1. If current date is April1, 2009;  its a partial week; week start in march---
in this case by default on page load, march month is selected in page load, week of 30 of march, start date 3/30/09  and end date 4/5/09

2. For whole week, if current date is 4/9/09, by default on page load, april month, week of 6 april, year 2009 is seletced. This is working fine..

Every week start on monday and end on sunday.

CHANGE:  For partial first week of month, on page load, previous month is selected on page load and last week of previous month is selected.

Ex: If current date is Jan1, 2010;   Month dropdown will have December month selected, week dropdown will have 28 th of december, year dropdown will have 2009 selected, start date 12/20/09 and end date 01/03/2010

Please make the changes in the below code.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="includes/cookie.js" type="text/javascript"></script> 
 
<script type="text/javascript">
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++) {
   dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
   if (startDate.getDay() == 1) break; // next monday
 }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) { 
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
  var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0; 
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      } 
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}       
function setNow() {
  var now = new Date()
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all 
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    } 
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
  
}
window.onload=function() { 
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html>  

Select allOpen in new window

I love the first 3 words, and hate the 4th.  :-)

I have a meeting to attend.  Let me take a look at this later.

Thanks. Please use the below code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="includes/cookie.js" type="text/javascript"></script> 
 
<script type="text/javascript">
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++) {
   dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
   if (startDate.getDay() == 1) break; // next monday
 }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) { 
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
  var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0; 
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      } 
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}       
function setNow() {
  var now = new Date()
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all 
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    } 
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
  
}
window.onload=function() { 
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html>   

Select allOpen in new window

Let me see if I understand you.

You want the Year & Month selection values to default to the Monday on the current week.

e.g., Should today be Wed, Apr 1, 2009; we should see:

year = 2009, month = Mar, week = "Week of March 3rd"

For Fri, Jan 1, 2010, we should see:

year = 2009, month = Dec, week = "Week of Dec 28th"

Right?

There is minor change. i feel its a writing mistake.

1. If today is April1, 2009;  we should see Year 2009; Month--March; Week of 30th of March; start date 3/30/09 end date 4/05/09

2. For Fri, Jan 1, 2010, we should see:
year = 2009, month = Dec, week = "Week of Dec 28th". Yes you are correct.

And this will be valid for all the first partial week of month, it will select the previous month, last week of previous month starting monday and year will depend upon the previous month.

Thanks

oops.

Should today be Wed, Apr 1, 2009; we should see:

year = 2009, month = Mar, week = "Week of March 30th"

ok, I'll see what I can do.  Hopefully it won't take nearly as much time as the previous fix.

yes, you are correct

There is a problem with your request.

Scenario:
- Date is 1/1/2010, which is a Friday.
  Adjusting the week to be the previous Monday means that
  year = 2009,  month = Dec, "Week of Dec 28th"
- ok, so far, so good.

- Except, if I now adjust year -> 2010; we get
  year = 2010, month = Dec, which tries to show the 1st week of Dec, 2010
  But! 12/1/2010 is on a Wednesday, so it gets adjusted to:
  year = 2010, month = Nov, "Week of Nov 30th" which is rarely going to be
  what the user expects

- What if we adjust month -> Apr; we get
  year = 2010, month = Apr, which tries to show the 1st week of Apr, 2010
  But! 4/1/2010 is on a Thursday, so it gets adjusted to:
  year = 2010, month = Mar, "Week of Mar 30th", again surprising almost
  all users.

Is this what you really want!?!

Hi Honor,

Its not for April and Jan months. Its for all the partial first week of the month.

How its working now is :
1. If suppose current date is 4/9/09  then Month april, week of 6 th april and year 2009 is selected. This is working fine. These type of cases are working fine.

2. Check the current date's current week starting monday ending sunday

3. If Suppose current date is April 2, in this case current week is week of 30th of March , Month march and year 2009.

4. Please make the change for first partial weeks of every month of any year. it should not be hardcoded. javascript code will automatically make the change.
If suppose current date is March1, 2009; then current week of this date is  week of 23 of Feb, Month Feb and year 2009.

Thanks.

Hi Honor,

Please use the Code that I have pasted in this post and please make the changes..
There will be no change in the dropdowns values.  Please dont make any change in the values of dropdowns.
What I want
1. PLEASE USE THE CODE THAT I HAVE ADDED IN THIS POST. As this code fills the dropdowns with the correct values.
   This code will fills the week dropdown with all the weeks of the month starting monday, which is working fine. Ex --for April 2009 month, week dropdown will have week of 6 april, 13, 20 and 27 april.
This is working great. PLEASE USE THE BELOW CODE AND MAKE CHANGES IN THAT.

2. CHANGE REQUIRED. In just displaying on page load for the first partial week of every month. partial week means first few days of any month, whose week start in the another month. THIS is just for the starting of the month.

 I just need one change. If first week belongs to two months, in that case Month Dropdown will have previous month selected, last week of previous month is selected in the week dropdown. Check current date's current week. Depending upon the week, month will be selected and week be selected on page load

EXAMPLES
1. Current date Jan1, 2009 -----Month Dropdown will display--December; week of 29 of decemeber, year 2008 as selected
2. current date Feb1, 2009 ---Month drop ---January, week of 26 January, yyear 2009 as selected
3. Current dtae March1, 2009 - -mOnth dropdown--feb  , week dropdown 23 of feb as selected
4. Current date April2, 2009---Month dropdown--March, week of 30 of march as selected
etc

If current date is April2, 2009; currently its displaying on page load April month selected and nothing is selected in the week dropdown. To avoid this situation, display March month in the  month dropdown and week of 30 th of March in week dropdown. As April2 week starts on week of 30 th of March. Week of 30 of March is in March month. So display just on page load , March month and week of 30 march.
PLEASE MAKE CHANGE#2.
Hope you understand the requirement.
Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="cookie.js" type="text/javascript"></script> 
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome 
   If you found it useful, please visit http://plungjan.name/reward.html 
   or help an artist/musician at http://talent-aid.org/
*/
  
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++) 
   {
    dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
  }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) { 
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
  var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0; 
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      } 
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}       
function setNow() {
  var now = new Date()
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all 
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    } 
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
  
}
window.onload=function() { 
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html>  
 

Select allOpen in new window

I see the words.

But, I need to understand exactly what it is you are asking.

For example, you say "There will be no change in the dropdowns values. "
But, the purpose of the Javascript function(s), is to do just that, i.e., change the dropdown (Selection option) values.

Is it that you don't want the existing HTML changed?

I am saying that i want change only on page load by default selection option for the first partial week of every month.

In current javascript code:
For April month--its displaying week of 6april, 13, 20 and 27 april. I am saying by this there will be no change in the dropdown values. I am saying that current javascript code is filling the dropdowns with the correct data.

What change I want is on page load, default selection of week, year and month dropdown for the partial weeks. For below examples on page load week, month and year dropdown will display the selection what i wrote below.
EXAMPLES
1. Current date Jan1, 2009 -----Month Dropdown will display--December; week of 29 of decemeber, year 2008 as selected
2. current date Feb1, 2009 ---Month drop ---January, week of 26 January, yyear 2009 as selected
3. Current dtae March1, 2009 - -mOnth dropdown--feb  , week dropdown 23 of feb as selected
4. Current date April2, 2009---Month dropdown--March, week of 30 of march as selected
etc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="cookie.js" type="text/javascript"></script> 
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome 
   If you found it useful, please visit http://plungjan.name/reward.html 
   or help an artist/musician at http://talent-aid.org/
*/
  
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++) 
   {
    dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
  }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) { 
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
  var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0; 
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      } 
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}       
function setNow() {
  var now = new Date()
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all 
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    } 
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
  
}
window.onload=function() { 
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html>  

Select allOpen in new window

> I am saying that i want change only on page load by default selection option for the first partial
> week of every month.

  I interpret this as meaning:

- When the 1st  of the current month is any day but Monday:

  "Adjust" the week dropdown to display the week as starting on the previous Monday.

- Have the "Starting" and "Ending" date values related to the first "week" dropdown.
  Specific example:
  For April 1, 2009, the default / selected "week" drop down should be from
  Mon Mar 30, 2009 -> Sun Apr 5, 2009.

- Additionally, the "Month" drop down should have "Mar" selected because
the Monday for the "current week" was the last Monday in March.

- Another example:
  For Friday, Jan 1, 2010, the "First week" would show as Dec 28, 2009 - Jan 3rd, 2010, and the year drop down would have 2009, and Dec selected.

Correct?

Is there anything else that I'm missing?

Yes, you are correct. You have interpreted it correctly.

Thanks

Minimum changes to the code you provided.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="cookie.js" type="text/javascript"></script>
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome
   If you found it useful, please visit http://plungjan.name/reward.html
   or help an artist/musician at http://talent-aid.org/
*/
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++)
   {
    dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
  }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}
function setNow() {
//var now = new Date()
  now = new Date( 2010, 0, 1 )
  var dow = now.getDay()
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
</body>
</html>

Select allOpen in new window

Sorry, had left in test date of 1/1/2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="cookie.js" type="text/javascript"></script>
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome
   If you found it useful, please visit http://plungjan.name/reward.html
   or help an artist/musician at http://talent-aid.org/
*/
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++)
   {
    dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
  }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}
function setNow() {
  var now = new Date()
  var dow = now.getDay()
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
</body>
</html>

Select allOpen in new window

Argh...  one more time, I left in an extra "var"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="cookie.js" type="text/javascript"></script>
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome
   If you found it useful, please visit http://plungjan.name/reward.html
   or help an artist/musician at http://talent-aid.org/
*/
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++)
   {
    dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
  }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}
function setNow() {
  now = new Date()
  var dow = now.getDay()
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
</body>
</html>

Select allOpen in new window

Thanks Honor. Last code works great. Awesome Job.

Would you please do one more favor for me. Would you please write the comments for what each function is doing.
Thanks

Anything else?

Thanks a lot Honor.

I have  noticed one thing: If I refresh the page after form submit, it will prompt the alert message saying

"Page cannot be refreshed without resending the information".

How to avoid that??

1. If i use Form Get method, then all parameters are passing in the url, that also, I donot want.

Thanks

That occurs because you have a "Submit" which uses a "Post".

Which is part of the protocol.

To remove this would require that you change from a Submit with a Post to something else...

Yes, you are correct. But how to resolve this issue?

Change the application to not use submit and/or Post.

Would you please change it.

Based upon the various ways to do this, and the implications associated with each, it would be better to open a new question for this topic.

In that case, i need to include the code again. I feel this post is fine as you are familiar with code. Please make changes in code to avoid that alert popup.

thanks

That is a different question, for which points should be allocated, and awarded.  Please ask a new question.

I have one more question to this post. Please make changes in the  code #24127769. I am displaying some links for selected week in a div tag.

Example
1. on page load, I am displaying links for current week in <div> tag
2. Depending upon the selection of week, and form submit will display another set of links in <div>

Would you please make changes in the code that will set the data present in a <div> tag in a cookie.

I want this because if we do IE page back button, it will retain the selection of week, month and year in the dropdowns, but its not retaining the data for the week displaying in a <div>.

<div>
<p><strong>April 13, 2009</strong><br>
<a href="/test.html" >test</a></p>
</div>

Select allOpen in new window

Hi Honor,

As you suggested, I have posted another question:
Javascript alert: Page cannot be refreshed without resending the information?

Please work on this question.

Thanks

Thank you.  It sounds like this question can now be closed.

Thanks for your persistence, and patience with me.

Hi Honor,

Please resolve this question as well

I have one more question to this post. Please make changes in the  code #24127769. I am displaying some links for selected week in a div tag.

Example
1. on page load, I am displaying links for current week in <div> tag
2. Depending upon the selection of week, and form submit will display another set of links in <div>

CHANGE:::Would you please make changes in the code that will set the data present in a <div> tag in a cookie.

I want this because if we do IE page back button, it will retain the selection of week, month and year in the dropdowns, but its not retaining the data for the week displaying in a <div>.

<div>
<p><strong>April 13, 2009</strong><br>
<a href="/test.html" >test</a></p>
</div>

Select allOpen in new window

Hi Honor,

Please resolve this question as well. Its really important

I have one more question to this post. Please make changes in the  code #24127769. I am displaying some links for selected week in a div tag.

Example
1. on page load, I am displaying links for current week in <div> tag
2. Depending upon the selection of week, and form submit will display another set of links in <div>

CHANGE:::Would you please make changes in the code that will set the data present in a <div> tag in a cookie.

I want this because if we do IE page back button, it will retain the selection of week, month and year in the dropdowns, but its not retaining the data for the week displaying in a <div>.

<div>
<p><strong>April 13, 2009</strong><br>
<a href="/test.html" >test</a></p>
</div>

Select allOpen in new window

Hi Honor,

please look into the post# 24332881

Hi Honor,

There are2 things that needs to be resolved in the code. Please make changes in the  code #24127769
I am displaying some links for selected week in a div tag.

Example
1. on page load, I am displaying links for current week in <div> tag
2. Depending upon the selection of week, and form submit will display another set of links in <div>

CHANGE:::Would you please make changes in the code that will set the data present in a <div> tag in a cookie.

I want this because if we do IE page back button, it will retain the selection of week, month and year in the dropdowns, but its not retaining the data for the week displaying in a <div>.

CHANGES NEEDED:
1. CHANGE:::Would you please make changes in the code that will set the data present in a <div> tag in a cookie.

2. After form submit, if we refresh the page; page cannot be refreshed without resending the information.

Thanks

Again, as you so clearly state:

>> I have one more question to this post.

This is a totally different question.

Please open a new question.

I want change in the same code.  You have the better understanding of the code.

As you suggested, I have posted another question:
Javascript alert: Page cannot be refreshed without resending the information?
Please solve this question.

thanks

I can't, without cookie.js

I have attached the cookie code

//Default Site Studio Generated .js Script File
 
// cookie.js file
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 

Select allOpen in new window

Can we PLEASE decide on the SAME code?

So please delete this and I have handled the cookie here:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24229186.html

Thanks

Saroj13, does Michel's solution work for you?

Hi Honor,

mplungian's solution is not working. Would you please make the change in the below code. Currently month, week and year is saved in the cookie.
I am also displaying data in <div id="data"> depending upon the selection of Month, week and year.

1. WOuld you please add <div id ="data"> also in the cookie. Problem occurs if we select values from the dropdown and click submit. Then IE page back is not retaining the previous values display in the <div id="data">.

2. If we use form method="post", IE refresh opens up an alert message saying "page cannot be refreshed without resending the information".
If we use Form "get method" then form values are passing in the address of the url:
ex: http://test.htm?formdate1=04%2F20%2F09&formdate2=04%2F26%2F09&year=2009&month=4&day=20. Form values should not pass in the url.

Would you please avoid these problems in either way form method ="get/post"

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
     
<script type="text/javascript">
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
 
//----------------------------------------------------------------------------
// Name: setDate()
// Role: Using current form values, populate the day (week) option list, &
//       display starting & optional end dates.
//----------------------------------------------------------------------------
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
}
 
//----------------------------------------------------------------------------
// Name: addSuffix()
// Role: Given an integer representing the day of the month, return the
//       proper suffix
// e.g.: addSuffix( 1 ) ==> 'st'
// Note: There is a problem, in that this routine presumes that all dates that
//       end with a 1 should have 'st' as the prefix, which is wrong.  For
//       example, 11, 12, 13, should all be 'th'
//       The correct code would be something like:
//----------------------------------------------------------------------------
// var str  = ' ' + day                     // Guarantee 2 places
// var len  = str.length                    // Number of positions
// var tens = str.substr( len - 2, 1 )      // Tens place
// var ones = str.substr( len - 1, 1 )      // Ones place
// return ( tens == '1' ) ? 'th' : ( ones in suf ) ? suf[ ones ] : 'th'
//----------------------------------------------------------------------------
var suf = "th,st,nd,rd".split(',')
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
//----------------------------------------------------------------------------
// Name: reportDay()
// Role: Use the selected year and month, to update the starting & ending dates
//----------------------------------------------------------------------------
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
    for (var i=0;i<7;i++) {
      dates[i]=startDate.getTime();
      startDate.setDate(startDate.getDate()+1)
    }
  } else
    dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
  }
}
 
//----------------------------------------------------------------------------
// Name: fmtDate()
// Role: Convert given date into mm/dd/yy string
//----------------------------------------------------------------------------
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
 
//----------------------------------------------------------------------------
// Name: show()
// Role: Format the given date(s) into a starting & optional ending date
//----------------------------------------------------------------------------
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
//----------------------------------------------------------------------------
// Name: setDayOrWeek()
// Role: Populate the day (week) option list, and select the desired option.
//----------------------------------------------------------------------------
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
}
 
//----------------------------------------------------------------------------
// Name: setNow()
// Role: Dynamically build the year dropdown select list, and select the year,
//       month, and day (week) entries based upon today's date.
//----------------------------------------------------------------------------
function setNow() {
  now = new Date()
  var dow = now.getDay()
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
 
//----------------------------------------------------------------------------
// Name: anonymous
// Role: Function executed when page is first loaded to initialize all of the
//       SELECT dropdowns.
//----------------------------------------------------------------------------
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
<div id="data">
<p><strong>April 13, 2009</strong><br>
<a href="/test.html" >test</a></p>
</div>
</body>
</html>

Select allOpen in new window

Hi Honor,

I have found one problem in the below code. Please resolve these problems
On Page load, everything is working fine.
PROBLEM1.  
1. Select Week of April 20 th and submit, it displays start date :04/20/09 and end date 04/26/09
2. Then select week of 13 april and submit, it shows 04/13/09 and end date 04/19/09 while loading, but at the end it puts values for start date :04/20/09 and end date 04/26/09
3. Then select week of april6, same thing happens, Start Date 04/20/09 and end date 04/26/09. All the time datesdiv tag is displaying the same start date and end date after submit.

PROBLEM2:
When we use Internet explorer back button, it displays the last selection all the time. It displays week of April6, start date :04/20/09 and end date 04/26/09.

Please resolve these problems . Its urgent.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
   <script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome 
   If you found it useful, please visit http://plungjan.name/reward.html 
   or help an artist/musician at http://talent-aid.org/
*/
  
// cookie.js file
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setWeeks(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.options[theForm.day.selectedIndex].value;
  var startDate = new Date(yyyy,mm,day,0,0,0);
  for (var i=0;i<7;i++) {
    dates[i]=startDate.getTime();
    startDate.setDate(startDate.getDate()+1)
  }
  show(dates);
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (day<10) day = "0"+day;
    if (setCookie) setCookie('week',yyyy+''+mm+''+day)
  }
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
  document.getElementById("datesDiv").innerHTML = text;
  document.forms[0].formdate1.value=d1;
  document.forms[0].formdate2.value=d2;
}
function formatTimestamp(date) {
  var yyyy = date.getFullYear();
  var mm = date.getMonth()+1;
  var dd = date.getDate();
  if (mm<10) mm = "0"+mm;
  if (dd<10) dd="0"+dd;
  return yyyy+"/"+mm+"/"+dd;
}	
 
function setWeeks(theForm,year,month) { 
  var d = new Date(year,month+1,0); // first day-1 in the coming month
  var daysInMonth = d.getDate();
  theForm.day.options.length=0;
  d.setDate(1); // first of this month
  for (var i=1;i<=daysInMonth;i++) {
    var date = d.getDate();
    if (d.getDay()==1) {
      theForm.day.options.length++;
      theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+date+addSuffix(date)+" of " +monthNames[d.getMonth()],date);
    }
    d.setDate(d.getDate()+1);
  }
}
 
function setWeek(theForm,year,month) { 
  var d = new Date(year,month+1,0); // first day-1 in the coming month
  var now = new Date();
  d.setHours(now.getHours(),now.getMinutes(),now.getSeconds(),0); // normalise
  now.setHours(now.getHours(),now.getMinutes(),now.getSeconds(),0);
  theForm.day.options.length=0;
 
  var thisWeek = 0;
  var mondayOffset = 1-now.getDay();
  d.setDate(now.getDate()+mondayOffset)
 
  if (month>d.getMonth()) {
  	theForm.month.selectedIndex = d.getMonth();
  }
  if (year>d.getFullYear()) theForm.year.selectedIndex++;
 
  var daysInMonth = new Date(d.getFullYear(),d.getMonth()+1,0).getDate();
  d.setDate(1); // first of the month
  
  for (i=1;i<=daysInMonth;i++) {
    d.setDate(d.getDate()+1);
    var date = d.getDate();
    if (d.getDay()==1) {
      theForm.day.options.length++;
      theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+date+addSuffix(date)+" of " +monthNames[d.getMonth()],date);//formatTimestamp(d))
    }
    if (now.getTime()==d.getTime()) {
      thisWeek =theForm.day.options.length-1; // the option just created
    } 
  }
  theForm.day.selectedIndex=thisWeek
}       
function setNow() {
  var now = new Date();
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
  var month = now.getMonth();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all 
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    } 
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
  mSel.selectedIndex = month;
  setWeek(document.forms[0],year,month)
  reportDay(document.forms[0])
   
}
window.onload=function() { 
  setNow()
  var cook = (window.getCookie)? getCookie('week'):"";
  if (cook) { // 20091213
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var date = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    for (var i=0;i<document.forms[0].day.length;i++) {
      if (document.forms[0].day.options[i].value==date) {
        document.forms[0].day.options[i].selected=true;
        break
      }
    }
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="get" action="">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" onChange="reportDay(this.form)"></select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
</body>
</html>  

Select allOpen in new window

Hi Honor,

I have found one problem in the below code. Please resolve these problems
On Page load, everything is working fine.
PROBLEM1.  
1. Select Week of April 20 th and submit, it displays start date :04/20/09 and end date 04/26/09
2. Then select week of 13 april and submit, it shows 04/13/09 and end date 04/19/09 while loading, but at the end it puts values for start date :04/20/09 and end date 04/26/09
3. Then select week of april6, same thing happens, Start Date 04/20/09 and end date 04/26/09. All the time datesdiv tag is displaying the same start date and end date after submit.

PROBLEM2:
When we use Internet explorer back button, it displays the last selection all the time. It displays week of April6, start date :04/20/09 and end date 04/26/09.

Please resolve these problems . Its urgent.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
 
 
<script type="text/javascript">
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. 
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =2; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
 
//----------------------------------------------------------------------------
// Name: setDate()
// Role: Using current form values, populate the day (week) option list, &
//       display starting & optional end dates.
//----------------------------------------------------------------------------
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
}
 
//----------------------------------------------------------------------------
// Name: addSuffix()
// Role: Given an integer representing the day of the month, return the
//       proper suffix
var suf = "th,st,nd,rd".split(',')
function addSuffix(day) {
  var str  = ' ' + day                     // 
 var len  = str.length                    // Number of positions
 var tens = str.substr( len - 2, 1 )      // Tens place
 var ones = str.substr( len - 1, 1 )      // Ones place
 return ( tens == '1' ) ? 'th' : ( ones in suf ) ? suf[ ones ] : 'th'
}
 
//----------------------------------------------------------------------------
// Name: reportDay()
// Role: Use the selected year and month, to update the starting & ending dates
//----------------------------------------------------------------------------
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
    for (var i=0;i<7;i++) {
      dates[i]=startDate.getTime();
      startDate.setDate(startDate.getDate()+1)
    }
  } else
    dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
  }
}
 
//----------------------------------------------------------------------------
// Name: fmtDate()
// Role: Convert given date into mm/dd/yy string
//----------------------------------------------------------------------------
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
 
//----------------------------------------------------------------------------
// Name: show()
// Role: Format the given date(s) into a starting & optional ending date
//----------------------------------------------------------------------------
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
//----------------------------------------------------------------------------
// Name: setDayOrWeek()
// Role: Populate the day (week) option list, and select the desired option.
//----------------------------------------------------------------------------
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
    	theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
			    }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
}
 
//----------------------------------------------------------------------------
// Name: setNow()
// Role: Dynamically build the year dropdown select list, and select the year,
//       month, and day (week) entries based upon today's date.
//----------------------------------------------------------------------------
function setNow() {
  now = new Date()
 
  var dow = now.getDay() 
 
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
   
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; 
 
    var firstYear = year + yearAdjustment; 
   
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0; 
  
 
  mSel.selectedIndex = now.getMonth();
 
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
 
//----------------------------------------------------------------------------
// Name: 
// Role: Function executed when page is first loaded to initialize all of the
//       SELECT dropdowns.
//----------------------------------------------------------------------------
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post" >
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" >
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
</body>
</html>

Select allOpen in new window

I'm doing the best that I can.  I'm sorry for the urgency, but this week, I've had my wife in the emergency room for more than 12 hours, and then, yesterday, she had to have a lumbar puncture (aka Spinal Tap).  So, I hope that you can understand my priorities.

Hi Honor,

I wish for good health for your wife. I hope she will be better soon.

When you have time, You can work on this.

Thanks

"Problem 1" is related to the fact that when the page loads (which is also true after a submit), the datediv section displays the "current" week.

Are you saying that after a submit, that the date should remain what was selected?

If so, and the user leaves the page, and then returns, what should be displayed?  The "current" week, or the last "selected" week?

If the "last selected" week is the right answer, for how long should this selection be valid?  Minutes, Hours, Days, Weeks, Months, Years?

"PROBLEM2:" Is this after a submit?

What happens with other browsers?  Do you know?  Do you care?

I am looking for IE browser only.

PROBLEM1.  
"Problem 1" is related to the fact that when the page loads (which is also true after a submit), the datediv section displays the "current" week.---Thats true

Are you saying that after a submit, that the date should remain what was selected?---Yes thats true. If
suppose somebody selected week of 6April and submit, It start date :04/0609 and end date 04/12/09.formdate1 04/06/09 and formdate2: 04/12/09.

If so, and the user leaves the page, and then returns, what should be displayed?  The "current" week, or the last "selected" week?---It should display the last selected week. It only displays the current week if page opens first time or nothing is selected and submit.

If the "last selected" week is the right answer, for how long should this selection be valid?  Minutes, Hours, Days, Weeks, Months, Years?---This is not valid. It always displays the current week on page load. If we select different week and submit, then it will display the start date and end date of that selection. This will be valid as long as we have not closed the page

PROBLEM2:
When we use Internet explorer back button, it displays the last selection all the time. It displays week of April6, start date :04/20/09 and end date 04/26/09.
---By this it means dropdowns are retaining the values if we use IE back button. You have set the Dropdown values in a cookie. WOuld you please also set formdate1 , formdate2, and datesdiv in a cookie, so that they will also preserve the values.

Thanks

Seems my comment was not posted.
Saroj. Since you insist on involving multiple experts on this, please upload the latest version of your working code on a site somewhere so we do not have to wade through other people's possibly working code to fix your ever changing specs. Thanks. Also be aware that this is not rent-a-coder and you are getting your job done for almost nothing. I would normally charge approx 50 euro an hour for custom code and since I get nothing for this, I am not spending enough time to give you perfect code for this ever increasingly complex piece of WORK. I am on vacation so have very little incentive to help you much and I apologise to honorgod that he was exposed to my bugs  

Hi,

Please see the below code thats latest and working one....

thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
 
 
<script type="text/javascript">
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. 
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =2; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
 
//----------------------------------------------------------------------------
// Name: setDate()
// Role: Using current form values, populate the day (week) option list, &
//       display starting & optional end dates.
//----------------------------------------------------------------------------
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
}
 
//----------------------------------------------------------------------------
// Name: addSuffix()
// Role: Given an integer representing the day of the month, return the
//       proper suffix
var suf = "th,st,nd,rd".split(',')
function addSuffix(day) {
  var str  = ' ' + day                     // 
 var len  = str.length                    // Number of positions
 var tens = str.substr( len - 2, 1 )      // Tens place
 var ones = str.substr( len - 1, 1 )      // Ones place
 return ( tens == '1' ) ? 'th' : ( ones in suf ) ? suf[ ones ] : 'th'
}
 
//----------------------------------------------------------------------------
// Name: reportDay()
// Role: Use the selected year and month, to update the starting & ending dates
//----------------------------------------------------------------------------
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
    for (var i=0;i<7;i++) {
      dates[i]=startDate.getTime();
      startDate.setDate(startDate.getDate()+1)
    }
  } else
    dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
  }
}
 
//----------------------------------------------------------------------------
// Name: fmtDate()
// Role: Convert given date into mm/dd/yy string
//----------------------------------------------------------------------------
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
 
//----------------------------------------------------------------------------
// Name: show()
// Role: Format the given date(s) into a starting & optional ending date
//----------------------------------------------------------------------------
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
//----------------------------------------------------------------------------
// Name: setDayOrWeek()
// Role: Populate the day (week) option list, and select the desired option.
//----------------------------------------------------------------------------
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
    	theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
			    }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
}
 
//----------------------------------------------------------------------------
// Name: setNow()
// Role: Dynamically build the year dropdown select list, and select the year,
//       month, and day (week) entries based upon today's date.
//----------------------------------------------------------------------------
function setNow() {
  now = new Date()
 
  var dow = now.getDay() 
 
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
   
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; 
 
    var firstYear = year + yearAdjustment; 
   
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0; 
  
 
  mSel.selectedIndex = now.getMonth();
 
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
 
//----------------------------------------------------------------------------
// Name: 
// Role: Function executed when page is first loaded to initialize all of the
//       SELECT dropdowns.
//----------------------------------------------------------------------------
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="get" >
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" >
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
<div id="data">
<p><strong>April 13, 2009</strong><br>
<a href="/test.html" >test</a></p>
</div>
 
</body>
</html>

Select allOpen in new window

Michel, please don't feel the need to apologize to me.  I understand completely.

I appreciate every opportunity that I have had to see your work.

You, as evidenced by your accumulated points, have demonstrated, time and time again, not only an exceptional understanding of diverse programming tasks, but have shown that you can help people resolve various issues in a timely, and very understandable fashion.

I comment you.

sigh...  Please forgive my typographical errors. :-)

I commend you.

No commend ;)

Anyway I am tired of changing code I did not write myself.
I cannot see what currently matches the code I produced here

https://www.experts-exchange.com/questions/24229186/Year-and-Month-Select-dropdown-Javascript.html
 
 

Hi,

Everything is working fine in the code except retaining data displaying in the <div id="displaydata"> on page back. I am displaying data depending upon the week selected.
Dropdowns retain the value. How to retain the links data dispalying in the <div id="displaydata">
Here is teh javascript code:

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
 
 
<script type="text/javascript">
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. 
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =2; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
 
//----------------------------------------------------------------------------
// Name: setDate()
// Role: Using current form values, populate the day (week) option list, &
//       display starting & optional end dates.
//----------------------------------------------------------------------------
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
}
 
//----------------------------------------------------------------------------
// Name: addSuffix()
// Role: Given an integer representing the day of the month, return the
//       proper suffix
var suf = "th,st,nd,rd".split(',')
function addSuffix(day) {
  var str  = ' ' + day                     // 
 var len  = str.length                    // Number of positions
 var tens = str.substr( len - 2, 1 )      // Tens place
 var ones = str.substr( len - 1, 1 )      // Ones place
 return ( tens == '1' ) ? 'th' : ( ones in suf ) ? suf[ ones ] : 'th'
}
 
//----------------------------------------------------------------------------
// Name: reportDay()
// Role: Use the selected year and month, to update the starting & ending dates
//----------------------------------------------------------------------------
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
    for (var i=0;i<7;i++) {
      dates[i]=startDate.getTime();
      startDate.setDate(startDate.getDate()+1)
    }
  } else
    dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
  }
}
 
//----------------------------------------------------------------------------
// Name: fmtDate()
// Role: Convert given date into mm/dd/yy string
//----------------------------------------------------------------------------
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
 
//----------------------------------------------------------------------------
// Name: show()
// Role: Format the given date(s) into a starting & optional ending date
//----------------------------------------------------------------------------
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
//----------------------------------------------------------------------------
// Name: setDayOrWeek()
// Role: Populate the day (week) option list, and select the desired option.
//----------------------------------------------------------------------------
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
    	theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
			    }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
}
 
//----------------------------------------------------------------------------
// Name: setNow()
// Role: Dynamically build the year dropdown select list, and select the year,
//       month, and day (week) entries based upon today's date.
//----------------------------------------------------------------------------
function setNow() {
  now = new Date()
 
  var dow = now.getDay() 
 
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
   
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; 
 
    var firstYear = year + yearAdjustment; 
   
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0; 
  
 
  mSel.selectedIndex = now.getMonth();
 
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
 
//----------------------------------------------------------------------------
// Name: 
// Role: Function executed when page is first loaded to initialize all of the
//       SELECT dropdowns.
//----------------------------------------------------------------------------
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="get" >
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" >
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
<div id="displaydata">
<a href="url1">url1</a>
<a href="url2">url </a>
</div>
</body>
</html>

Select allOpen in new window

I'll take a look in a few hours.

I think it is not needed to use a cookie, just to call the show at the right time - something I am sure I did in one version of this code in one of the many many versions of this question

Yes as I suspected.
I am not happy to see an old and not so elegant version of my script - I had one without useweeks

Just change the last line of the script from

}
</script>
 
to
 
  reportDay(document.forms[0])
}
</script>

Select allOpen in new window

Hi mplungian,

You have already created the cookie week that contains the month, day and year.
What I want is to retain thevaluesinside the <div> also in the cookie. Please find your original code.

<div id="datesDiv"></div>
<div id="displaydata">
<a href="url1">url1</a>
<a href="url2">url </a>
</div>

Would you please make changes in the below code that will retain the data for datesDiv and displaydata. When we use page back button and come again on the same page, datesDiv and displaydata will also retain the value.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="includes/cookie.js" type="text/javascript"></script> 
 
<script type="text/javascript">
/* Set weeks in month script
   Copyright (c) 2003-2009 Michel Plungjan "javascripts (a) plungjan.name" - comments welcome
   If you found it useful, please visit http://plungjan.name/reward.html
   or help an artist/musician at http://talent-aid.org/
*/
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. If false, years must be hardcoded in form
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =10; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(',');
var suf = "th,st,nd,rd".split(',')
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
 }
function addSuffix(day) {
  var str = day.toString();
  var lastDigit = str.substring(str.length-1);
  return suf[lastDigit]?suf[lastDigit]:"th"
}
 
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
   for (var i=0;i<7;i++) {
   dates[i]=startDate.getTime();
   startDate.setDate(startDate.getDate()+1)
   if (startDate.getDay() == 1) break; // next monday
 }
}
  else dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
 }
 
}
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2) 
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
function setDayOrWeek(theForm,year,month) { 
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
  var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0; 
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
        theForm.day.options[theForm.day.options.length-1] = new Option("The week of the "+i+addSuffix(i)+" of " +monthNames[month],i)
      }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      } 
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
 
}       
function setNow() {
  var now = new Date()
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; // remove all 
 
    var firstYear = year + yearAdjustment;
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    } 
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0;
 
  mSel.selectedIndex = now.getMonth();
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
  
}
window.onload=function() { 
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
}
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="post">
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" ><!-- Use all days to help NS4 -->
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div> 
<div id="displaydata">
<a href="url1">url1</a>
<a href="url2">url </a>
</div>
</body>
</html> 

Select allOpen in new window

Please stop posting all sorts of versions of this code. It is EXTREMELY annoying to see my own code in 10 different versions, some with bugs I fixed later and some with bugs inserted by you or others.

The code you posted last is not the very last version of my code and it does not work with the html you have

Did you even try the code I posted in #24361688 ? Why do you want the div content in the cookie when it is generated with the reportDay when you change the code from your comment #24359961 from

}
</script>
 
to
 
  reportDay(document.forms[0])
}
</script>

Here. I made the change for you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
 
 
<script type="text/javascript">
var daysToKeep = 14; // default cookie life...
var today      = new Date(); 
var expiryDate = new Date(today.getTime() + (daysToKeep * 86400000));
 
 
/* Cookie functions originally by Bill Dortsch */
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 
 
// Change the values below if needed:
var adjustYears=true; // fix the year drop down to be around now. 
var yearAdjustment=0; // how many years prior to this year
var numberOfYears =2; // how many years in the dropdown
var yearsDescending = true; // count down = true, up = false
var useWeeks = true; // true uses weeks, false uses days in the day dropdown
 
var monthNames = "January,February,March,April,May,June,July,August,September,October,November,December".split(',');
 
//----------------------------------------------------------------------------
// Name: setDate()
// Role: Using current form values, populate the day (week) option list, &
//       display starting & optional end dates.
//----------------------------------------------------------------------------
function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  var month = theForm.month.selectedIndex
  setDayOrWeek(theForm,year,month)
  reportDay(theForm)
}
 
//----------------------------------------------------------------------------
// Name: addSuffix()
// Role: Given an integer representing the day of the month, return the
//       proper suffix
var suf = "th,st,nd,rd".split(',')
function addSuffix(day) {
  var str  = ' ' + day                     // 
 var len  = str.length                    // Number of positions
 var tens = str.substr( len - 2, 1 )      // Tens place
 var ones = str.substr( len - 1, 1 )      // Ones place
 return ( tens == '1' ) ? 'th' : ( ones in suf ) ? suf[ ones ] : 'th'
}
 
//----------------------------------------------------------------------------
// Name: reportDay()
// Role: Use the selected year and month, to update the starting & ending dates
//----------------------------------------------------------------------------
function reportDay(theForm,submitting) {
  var yyyy = theForm.year.value;
  var mm = theForm.month.selectedIndex;
  var dates=new Array();
  var day = theForm.day.value;
  var startDate = new Date(yyyy,mm,day,0,0,0)
  if (useWeeks) {
    for (var i=0;i<7;i++) {
      dates[i]=startDate.getTime();
      startDate.setDate(startDate.getDate()+1)
    }
  } else
    dates[0]=startDate.getTime();
  show(dates)
  if (submitting) {
    mm+=1; // js months start at 0
    if (mm<10) mm="0"+mm;
    if (setCookie) setCookie('week',yyyy+''+mm+''+theForm.day.selectedIndex)
  }
}
 
//----------------------------------------------------------------------------
// Name: fmtDate()
// Role: Convert given date into mm/dd/yy string
//----------------------------------------------------------------------------
function fmtDate(timeStamp) {
  var d = new Date(timeStamp)
  var yy = d.getFullYear().toString().substring(2)
  var mm = d.getMonth()+1;
  if (mm<10) mm="0"+mm; // comment this out if you do not want padding with 0
  var dd = d.getDate();
  if (dd<10) dd="0"+dd; // comment this out if you do not want padding with 0
  return ""+mm+"/"+dd+"/"+yy;
}
 
//----------------------------------------------------------------------------
// Name: show()
// Role: Format the given date(s) into a starting & optional ending date
//----------------------------------------------------------------------------
function show(dates) {
  var d1 = fmtDate(dates[0])
  var d2 = (dates.length>1)?fmtDate(dates[dates.length-1]):"";
 
  var text = 'Start date: ' + d1 + ((dates.length==1)?'':'<br />End date: ' +d2)
  document.getElementById("datesDiv").innerHTML = text;
  document.getElementById('formdate1').value=d1;
  document.getElementById('formdate2').value=d2;
}
 
//----------------------------------------------------------------------------
// Name: setDayOrWeek()
// Role: Populate the day (week) option list, and select the desired option.
//----------------------------------------------------------------------------
function setDayOrWeek(theForm,year,month) {
  var d = new Date(year,month+1,0); // last day in the previous month because months start on 0
//var now = new Date();
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (useWeeks) {
    var selectedWeek = 0;
    theForm.day.options.length=0;
    var thisWeek = 0;
    for (i=1;i<=daysInMonth;i++) {
      d.setDate(i);
      if (d.getDay()==1) {
        theForm.day.options.length++;
    	theForm.day.options[theForm.day.options.length-1] = new Option("Week of " +monthNames[month] + " "  +i+ addSuffix(i) +" ",i)
			    }
      if (now.getDate()==d.getDate()) {
        thisWeek = theForm.day.options.length-1;
      }
    }
    theForm.day.selectedIndex=thisWeek
  }
  else if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++;
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
  if (now.getFullYear()!=year || now.getMonth() != month) {
    theForm.day.selectedIndex=0;
  }
}
 
//----------------------------------------------------------------------------
// Name: setNow()
// Role: Dynamically build the year dropdown select list, and select the year,
//       month, and day (week) entries based upon today's date.
//----------------------------------------------------------------------------
function setNow() {
  now = new Date()
 
  var dow = now.getDay() 
 
  if ( dow != 1 ) {
    now.setDate( now.getDate() - ( ( dow == 0 ) ? 6 : ( dow - 1 ) ) )
  }
 
  var ySel = document.forms[0].year;
   
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
 
  var year = now.getFullYear();
 
  if (adjustYears) {
    ySel.options.length=0; 
 
    var firstYear = year + yearAdjustment; 
   
    if (yearsDescending ) {
      firstYear = year - yearAdjustment;
      for (var i=firstYear, n=firstYear-numberOfYears;i>=n;i--) {
        ySel.options.length++
        ySel.options[ySel.options.length-1] = new Option(i,i)
      }
    }
    else for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[0].value);
  var diff = year-minYear;
  ySel.selectedIndex=((diff)>0)?diff:0; 
  
 
  mSel.selectedIndex = now.getMonth();
 
  if (!useWeeks) dSel.selectedIndex = now.getDate()-1; // NB: Now 0 based
 
}
 
//----------------------------------------------------------------------------
// Name: 
// Role: Function executed when page is first loaded to initialize all of the
//       SELECT dropdowns.
//----------------------------------------------------------------------------
window.onload=function() {
  setNow()
  setDate(document.forms[0])
 
  var cook = getCookie('week');
  if (cook) {
    var yyyy = cook.substring(0,4)
    var month = cook.substring(4,6);
    month-=1; // js months start at 0
    var weekIdx = cook.substring(6);
    for (var i=0;i<document.forms[0].year.length;i++) {
      if (document.forms[0].year.options[i].value==yyyy) {
        document.forms[0].year.options[i].selected=true;
        break
      }
    }
    setDate(document.forms[0])
    document.forms[0].month.selectedIndex=month;
    setDate(document.forms[0])
    document.forms[0].day.selectedIndex=weekIdx;
  }
  reportDay(document.forms[0]); // Set the content onload
}
 
</script>
</head>
 
 
<body>
<form onSubmit="reportDay(this,true); " method="get" >
<input type="hidden" id="Hidden1" name="formdate1" />
<input type="hidden" id="Hidden2" name="formdate2" />
<select name="year" onChange="setDate(this.form)">
</select>
<select name="month" onChange="setDate(this.form)">
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day" >
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<br /><input type="submit" />
</form>
<hr />
<div id="datesDiv"></div>
<div id="data">
<p><strong>April 13, 2009</strong><br>
<a href="/test.html" >test</a></p>
</div>
 
</body>
</html>

Select allOpen in new window

Thank you for the grade & points.

Good luck & have a great day

Yay