• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1542
  • Last Modified:

Year and Month Select dropdown Javascript

Hi mplungjan:,

I am using the below code for filling Month, week and year dropdown.
There is  a bug in the below code for week dropdown. Week dropdown is not working for every month like today.


For todays date, means April 1, 2009
Month dropdown will have april selected,  Year dropdown will have 2009. Thats fine.
PROBLEM: There is a problem in WEEK dropdown . Nothing is selected in the week dropdown for todays date . Week dropdown will always have First Monday of week selected. Like for this week, Monday is on 30 March.

It should have week of March 30 selected in  the week dropdown.  
Year dropdown 2009, Week dropdown ---Week of 30 of March, year 2009

Would you please fix the problem  in the below code.
Thanks

script type="text/javascript" src="cookie.js"></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="formdate1" name="formdate1" />
<input type="hidden" id="formdate2" 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>  
Open in New Window Select All Accept and Award Points Accept as Solution

Open in new window

0
Saroj13
Asked:
Saroj13
  • 43
  • 39
  • 8
  • +1
3 Solutions
 
prokvkCommented:
It's criminally inefficient to struggle with dates / datetimes only via JavaScript. I strongly advice using server side scripting (PHP) to do this.
0
 
Saroj13Author Commented:
I need to work in javascript only. No php.
0
 
HonorGodCommented:
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;
  }
 
}

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HonorGodCommented:
If you need to correct the Start and End dates values, let me know.
0
 
HonorGodCommented:
yuck... the "30" should be "30th", not "30st"
0
 
Saroj13Author Commented:
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
0
 
Saroj13Author Commented:
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


 
0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
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'
}

Open in new window

0
 
Saroj13Author Commented:
Thanks a lot for all help.
0
 
HonorGodCommented:
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" )
}

Open in new window

0
 
HonorGodCommented:
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.
0
 
HonorGodCommented:
Please try this, and let me know what you think...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Date Dropdown </title>
<script type="text/javascript" src="cookie.js"></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
//alert( 'setDate(): y = ' + year + ' m = ' + month )
  setDayOrWeek( theForm, year, month )
  reportDay( theForm )
}
 
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" )
}
 
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 ) {
    var dow = startDate.getDay()
//  if ( ( startDate.getDate() < 2 ) && ( dow > 1 ) ) {
//    alert( 'startDate: ' + startDate + ' & dow = ' + dow )
//  }
    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() ).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 ); // d = last day in the current month
  var now = new Date();                     // Today
  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 ( var i = 1; i <= daysInMonth; i++ ) {
      d.setDate( i );                       // Day of month being processed
      if ( d.getDay() == 1 ) {              // Is it on a Monday?
        theForm.day.options[ theForm.day.options.length++ ] = new Option( "The week of the " + withSuffix( 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 " + withSuffix( monday.getDate() ) + " of " + monthNames[ monday.getMonth() ], monday.getDate() )
        theForm.month.selectedIndex--
      }
      if ( now.getDate() == d.getDate() ) {
        thisWeek = theForm.day.options.length - 1;
      }
    }
    theForm.day.selectedIndex = thisWeek
  } else {
    if ( daysInMonth > 28 ) {
      for ( var 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 ySel = document.forms[ 0 ].year;
  var mSel = document.forms[ 0 ].month;
  var dSel = document.forms[ 0 ].day;
 
  var now  = new Date()
  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[ 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 )
      }
    }
  }
  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); return false" method="post">
<input type="hidden" id="formdate1" name="formdate1" />
<input type="hidden" id="formdate2" 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>

Open in new window

0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
Thanks for the clarifications.
0
 
Saroj13Author Commented:
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.
0
 
HonorGodCommented:
I'm trying, but at the moment, I'm working on my day job.  :-)
0
 
Saroj13Author Commented:
Hi Honor,

Whenever you have time, please fix the start date and end date.
0
 
Saroj13Author Commented:
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
0
 
Saroj13Author Commented:
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>  

Open in new window

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

Right now, I have to get the kids fed. :-D
0
 
Saroj13Author Commented:
Hi Honor,

Would you please fix the code.

Thanks
0
 
Saroj13Author Commented:
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
0
 
Saroj13Author Commented:
Hi Honor,

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

thanks
0
 
Saroj13Author Commented:
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> 

Open in new window

0
 
HonorGodCommented:
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>

Open in new window

0
 
HonorGodCommented:
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
0
 
HonorGodCommented:
Have you had a chance to try it?
0
 
Saroj13Author Commented:
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>  

Open in new window

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

I have a meeting to attend.  Let me take a look at this later.
0
 
Saroj13Author Commented:
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>   

Open in new window

0
 
HonorGodCommented:
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?
0
 
Saroj13Author Commented:
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

0
 
HonorGodCommented:
oops.

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

year = 2009, month = Mar, week = "Week of March 30th"
0
 
HonorGodCommented:
ok, I'll see what I can do.  Hopefully it won't take nearly as much time as the previous fix.
0
 
Saroj13Author Commented:
yes, you are correct
0
 
HonorGodCommented:
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!?!
0
 
Saroj13Author Commented:
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.
0
 
HonorGodCommented:
I understand.  Please forgive me if my explanation was insufficient.
I was trying to convey how disconcerting I find it to think I am selecting a specific week, or month, or year, and have the selections adjusted to something else.  That is what I was trying to get across.

I just gave those two examples because that happened to be the ones I first tested.  Each time, I did a mental "huh?", soon followed by "oh, yeah... yuck."

Does that make sense?

This may be what you want.

It doesn't re-adjust the year & month selection as part of the year or month "onChange" event...
<!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">
  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: field()
  // Role: Attempt to locate a document element using the specified id attribute
  //----------------------------------------------------------------------------
  function field( id ) {
    var ele = document.getElementById( id )
    if ( !ele ) {
      alert( 'Specified document element not found: id="' + id + '"' )
    }
    return ele
  }
 
  //----------------------------------------------------------------------------
  // 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 )
    field( 'datesDiv' ).innerHTML = text
    field( 'Hidden1' ).value = d1
    field( 'Hidden2' ).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 now  = new Date( 2010, 0, 1 )
 
    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 )
        }
        adjust()
        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: adjust()
  // Role: Change the year & month dropdown select elements (if necessary),
  //       based upon the current day (week) selection.
  //----------------------------------------------------------------------------
  function adjust() {
    var Mon = new Date()
    Mon.setTime( document.forms[ 0 ].day.value )
    var year   = Mon.getFullYear()
    var month  = Mon.getMonth()
    var yrs    = document.forms[ 0 ].year
    for ( var y = 0; y < yrs.length; y++ ) {
      if ( yrs.options[ y ].value == year ) {
        yrs.options[ y ].selected = true
        break
      }
    }
    document.forms[ 0 ].month.selectedIndex = month
  } // adjust()
 
  //----------------------------------------------------------------------------
  // 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
    adjust()                                // Adjust the year & month selects
 
    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'><hr></div>
</body>
</html>

Open in new window

0
 
Saroj13Author Commented:
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>  
 

Open in new window

0
 
HonorGodCommented:
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?
0
 
Saroj13Author Commented:
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>  

Open in new window

0
 
HonorGodCommented:
> 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?
0
 
Saroj13Author Commented:
Yes, you are correct. You have interpreted it correctly.

Thanks
0
 
HonorGodCommented:
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>

Open in new window

0
 
HonorGodCommented:
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>

Open in new window

0
 
HonorGodCommented:
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>

Open in new window

0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
Better?
<!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(',');
 
//----------------------------------------------------------------------------
// 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>
</body>
</html>

Open in new window

0
 
HonorGodCommented:
Anything else?
0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
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...
0
 
Saroj13Author Commented:
Yes, you are correct. But how to resolve this issue?
0
 
HonorGodCommented:
Change the application to not use submit and/or Post.
0
 
Saroj13Author Commented:
Would you please change it.
0
 
HonorGodCommented:
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.
0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
That is a different question, for which points should be allocated, and awarded.  Please ask a new question.
0
 
Saroj13Author Commented:
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>

Open in new window

0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
Thank you.  It sounds like this question can now be closed.

Thanks for your persistence, and patience with me.
0
 
Saroj13Author Commented:
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>

Open in new window

0
 
Saroj13Author Commented:
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>

Open in new window

0
 
Saroj13Author Commented:
Hi Honor,

please look into the post# 24332881
0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
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.
0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
I can't, without cookie.js
0
 
Saroj13Author Commented:
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";
} 

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
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
0
 
HonorGodCommented:
Saroj13, does Michel's solution work for you?
0
 
Saroj13Author Commented:
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>

Open in new window

0
 
Saroj13Author Commented:
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>  

Open in new window

0
 
Saroj13Author Commented:
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>

Open in new window

0
 
HonorGodCommented:
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.
0
 
Saroj13Author Commented:
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
0
 
HonorGodCommented:
"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?
0
 
Saroj13Author Commented:
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
0
 
Michel PlungjanIT ExpertCommented:
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  
0
 
Saroj13Author Commented:
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>

Open in new window

0
 
HonorGodCommented:
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.
0
 
HonorGodCommented:
sigh...  Please forgive my typographical errors. :-)

I commend you.
0
 
Michel PlungjanIT ExpertCommented:
No commend ;)
0
 
Michel PlungjanIT ExpertCommented:
Anyway I am tired of changing code I did not write myself.
I cannot see what currently matches the code I produced here

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24229186.html
 
 
0
 
Saroj13Author Commented:
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>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
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>

Open in new window

0
 
Saroj13Author Commented:
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> 

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
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>

Open in new window

0
 
HonorGodCommented:
Thank you for the grade & points.

Good luck & have a great day
0
 
Michel PlungjanIT ExpertCommented:
Yay
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 43
  • 39
  • 8
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now