Solved

Year and Month Select dropdown Javascript

Posted on 2009-04-01
91
1,500 Views
Last Modified: 2012-06-27
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
Comment
Question by:Saroj13
  • 43
  • 39
  • 8
  • +1
91 Comments
 
LVL 5

Expert Comment

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

Author Comment

by:Saroj13
ID: 24042727
I need to work in javascript only. No php.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24043167
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24043193
If you need to correct the Start and End dates values, let me know.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24043204
yuck... the "30" should be "30th", not "30st"
0
 

Author Comment

by:Saroj13
ID: 24043243
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
 

Author Comment

by:Saroj13
ID: 24043517
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
 

Author Comment

by:Saroj13
ID: 24043726
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24044028
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
 

Author Comment

by:Saroj13
ID: 24044085
Thanks a lot for all help.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24045906
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24046075
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
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24046139
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
 

Author Comment

by:Saroj13
ID: 24046198
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24048716
Thanks for the clarifications.
0
 

Author Comment

by:Saroj13
ID: 24049640
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24049880
I'm trying, but at the moment, I'm working on my day job.  :-)
0
 

Author Comment

by:Saroj13
ID: 24052991
Hi Honor,

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

Author Comment

by:Saroj13
ID: 24053071
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
 

Author Comment

by:Saroj13
ID: 24053360
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24068970
ok, I hope (expect) to be able to get to this today.  

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

Author Comment

by:Saroj13
ID: 24074780
Hi Honor,

Would you please fix the code.

Thanks
0
 

Author Comment

by:Saroj13
ID: 24079861
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
 

Author Comment

by:Saroj13
ID: 24081467
Hi Honor,

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

thanks
0
 

Author Comment

by:Saroj13
ID: 24089062
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24103721
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24103726
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24107761
Have you had a chance to try it?
0
 

Author Comment

by:Saroj13
ID: 24109117
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24109756
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
 

Author Comment

by:Saroj13
ID: 24109775
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24110030
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
 

Author Comment

by:Saroj13
ID: 24110077
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24110194
oops.

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

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

Expert Comment

by:HonorGod
ID: 24110200
ok, I'll see what I can do.  Hopefully it won't take nearly as much time as the previous fix.
0
 

Author Comment

by:Saroj13
ID: 24110202
yes, you are correct
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24113118
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
 

Author Comment

by:Saroj13
ID: 24113375
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
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 500 total points
ID: 24114887
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
 

Author Comment

by:Saroj13
ID: 24123215
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24123284
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
 

Author Comment

by:Saroj13
ID: 24123350
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24126951
> 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
 

Author Comment

by:Saroj13
ID: 24127271
Yes, you are correct. You have interpreted it correctly.

Thanks
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24127567
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 41

Expert Comment

by:HonorGod
ID: 24127569
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24127576
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
 

Author Comment

by:Saroj13
ID: 24127684
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
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 500 total points
ID: 24127769
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24134582
Anything else?
0
 

Author Comment

by:Saroj13
ID: 24162457
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24162722
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
 

Author Comment

by:Saroj13
ID: 24162821
Yes, you are correct. But how to resolve this issue?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24164168
Change the application to not use submit and/or Post.
0
 

Author Comment

by:Saroj13
ID: 24170049
Would you please change it.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24170187
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
 

Author Comment

by:Saroj13
ID: 24170201
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24170701
That is a different question, for which points should be allocated, and awarded.  Please ask a new question.
0
 

Author Comment

by:Saroj13
ID: 24170918
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
 

Author Comment

by:Saroj13
ID: 24171056
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24171082
Thank you.  It sounds like this question can now be closed.

Thanks for your persistence, and patience with me.
0
 

Author Comment

by:Saroj13
ID: 24171108
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
 

Author Comment

by:Saroj13
ID: 24171342
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
 

Author Comment

by:Saroj13
ID: 24171412
Hi Honor,

please look into the post# 24332881
0
 

Author Comment

by:Saroj13
ID: 24171962
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24172637
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
 

Author Comment

by:Saroj13
ID: 24172651
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24172703
I can't, without cookie.js
0
 

Author Comment

by:Saroj13
ID: 24172710
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24174087
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24184395
Saroj13, does Michel's solution work for you?
0
 

Author Comment

by:Saroj13
ID: 24218591
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
 

Author Comment

by:Saroj13
ID: 24227327
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
 

Author Comment

by:Saroj13
ID: 24227350
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24227355
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
 

Author Comment

by:Saroj13
ID: 24227385
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24232267
"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
 

Author Comment

by:Saroj13
ID: 24238942
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24253383
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
 

Author Comment

by:Saroj13
ID: 24253481
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24253496
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24253503
sigh...  Please forgive my typographical errors. :-)

I commend you.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24257537
No commend ;)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24257809
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
 

Author Comment

by:Saroj13
ID: 24359961
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24361345
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24361688
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
 

Author Comment

by:Saroj13
ID: 24366502
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24371796
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24675332
Thank you for the grade & points.

Good luck & have a great day
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24676395
Yay
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now