You are here: irt.org | Articles | JavaScript | Date and Time | And now...The Weekly Update Script [ previous next ]
Published on: Monday 3rd February 1999 By: Martin Webb
One of the more common features shared by most sites is the "What's New" page. This page can contain anything from news and press releases, to listings of new features that have been added to the site that week. But implementing a weekly "What's New" page can be a daunting task.
Depending on who and where you are, the week can start on Sunday or Monday. The first week of the year can be the first week which contains the 1st of January or the first Monday in January. And then there's the whole issue of reliability. Since this page will need to be updated weekly, you have to be able to rely on the human factor, i.e., can you trust someone to change the page and the links to it every week?
This article describes how you can manipulate the date object to figure out which week of the year a date falls in, and where the first week of the year is. (In this case, week 1 is defined as the week with the first Sunday in January.) It is important to note that, on occasion, the first few days of a particular year may fall into the last week of the previous year. Becase of this, we will need 53 weekly pages instead of 52 (366 [365 days + 1 leap day] divided by 7 days [1 week] does not exactly equal 52 weeks).
This script can then be used to provide an automated link to the current page for the current week. For this article, let's assume that the pages week1.htm through to week53.htm will be used. The exact format of the page names can be adapted to suit the design of your own site. If a page contains a link to the current week's page, it might look something like this:
<A HREF="week3.htm">What's new this week?</A>
Since the link is hard-coded, we would need to amend this link each week, which would soon become a chore. This simple task could occasionally get overlooked, and instead of being a link to this week, it would become a link to last week, or even worse, a week several months ago.
By using JavaScript, we can alter the HREF property of a link using the onClick event handler:
<A HREF="data/weekxx.htm" onClick="this.href='data/week3.htm'">What's new this week?</A>
This previous link provides a default page (weekxx.htm) for browsers that don't support JavaScript, or where JavaScript has been disabled, and a link to the current week's page by replacing the current (this) links href property with week3.htm.
We can now take this a step further and automate the weekly page, by using a JavaScript function (getWeek()) that returns the page name to be used:
<A HREF="data/weekxx.htm" onClick="this.href='showWeek()'">What's new this week?</A>
A date object can be created to hold the current date by using a simple line of JavaScript code:
var today = new Date();
This creates a new date object (today) that contains the current date. If we had specified parameters within the Date() method, for example Date(98,6,13), we can create a date object for any date we specified.
We use the function, showWeek(), to figure out the current day, month, and year:
function showWeek() {
var today = new Date();
var year = y2k(today.getYear());
var month = today.getMonth();
var day = today.getDate();The getYear() date method returns a two digit date up to 1999, and a four digit date from 2000 onward. To ensure that we actually get a four digit date, we use the y2k() function, which when given a two or four digit year, will always return a four digit year:
function y2k(number) { return (number < 1000) ? number + 1900 : number; }The last part of the showWeek() function calls the getWeek() function. The getWeek() function is used to calculate the week number of the page to be loaded, which is returned to the selectWeek() function, which in turn returns a page name to the onClick event handler:
return 'data/week' + getWeek(year,month,day) + '.htm'; }
All we need to do now is to define the getWeek() function, which figures out which week the current date falls within:
function getWeek(year,month,day) {
// Create a date object for 1st January this year:
var newYear = new Date(year,0,1);
// Calculate the offset of the day of the week of the
// 1st from Monday:
var offset = 7 + 1 - newYear.getDay();
// If over one week then set to 1 day:
if (offset == 8) offset = 1;
// Calculate the day of the year (daynum) since the
// 1st of January:
var daynum = ((Date.UTC(y2k(year),month,day,0,0,0) -
Date.UTC(y2k(year),0,1,0,0,0)) /1000/60/60/24) + 1;
// Use daynum and offset to work out the week number
var weeknum = Math.floor((daynum-offset+7)/7);
// If the weeknum is zero, then the date falls within the
// last week of last year
if (weeknum == 0) {
// decrease year by 1
year--;
// Create a date object for 1st January last year:
var prevNewYear = new Date(year,0,1);
// Calculate the offset for last year:
var prevOffset = 7 + 1 - prevNewYear.getDay();
// Check for 53rd week
if (prevOffset == 2 || prevOffset == 8) weeknum = 53; else weeknum = 52;
}
}Finally we need to return the week number:
return weeknum; }
The working example uses the following code:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
function showWeek() {
var today = new Date(year,month,day);
var year = y2k(today.getYear());
var month = today.getMonth();
var day = today.getDate();
return 'data/week' + getWeek(year,month,day) + '.htm';
}
function getWeek(year,month,day) {
var newYear = new Date(year,0,1);
var offset = 7 + 1 - newYear.getDay();
if (offset == 8) offset = 1;
var daynum = ((Date.UTC(y2k(year),month,day,0,0,0) -
Date.UTC(y2k(year),0,1,0,0,0)) /1000/60/60/24) + 1;
var weeknum = Math.floor((daynum-offset+7)/7);
if (weeknum == 0) {
year--;
var prevNewYear = new Date(year,0,1);
var prevOffset = 7 + 1 - prevNewYear.getDay();
if (prevOffset == 2 || prevOffset == 8) weeknum = 53; else weeknum = 52;
}
return weeknum;
}
//-->
</SCRIPT>
<P>
<A HREF="data/weekxx.htm" onClick="this.href=showWeek()">Click here
to test it out</A>
</P>Until now, the script has only permitted the user to select the current week's "What's New" page. Next we'll show you how to make it so the user can select any day of the year and display the "What's New" page for that particular week.
We can keep the current getWeek() function as it stands. All we need add is a way for the user to select a date. Rather than let the user type in the required date, which then requires a large amount of validation to confirm that it is indeed a valid date, the following form restricts the users input to one of the 12 months and up to 31 days for a particular month:
<FORM> Month: <SELECT NAME="month"> <OPTION VALUE="1">January <OPTION VALUE="2">February <OPTION VALUE="3">March <OPTION VALUE="4">April <OPTION VALUE="5">May <OPTION VALUE="6">June <OPTION VALUE="7">July <OPTION VALUE="8">August <OPTION VALUE="9">September <OPTION VALUE="10">October <OPTION VALUE="11">November <OPTION VALUE="12">December </SELECT> Day: <SELECT NAME="day"> <OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 <OPTION>6 <OPTION>7 <OPTION>8 <OPTION>9 <OPTION>10 <OPTION>11 <OPTION>12 <OPTION>13 <OPTION>14 <OPTION>15 <OPTION>16 <OPTION>17 <OPTION>18 <OPTION>19 <OPTION>20 <OPTION>21 <OPTION>22 <OPTION>23 <OPTION>24 <OPTION>25 <OPTION>26 <OPTION>27 <OPTION>28 <OPTION>29 <OPTION>30 <OPTION>31 </SELECT> <INPUT TYPE="BUTTON" VALUE="Show" onClick="selectWeek(this.form)"> </FORM>
Rather than using the existing showWeek() function, we are now using a new selectWeek() function. The selectWeek() function passes a reference to the current (this) form, using the buttons' onClick event handler.
The selectWeek() function retrieves the values of the month and day from the passed reference to the form object. This invokes the isDate() function to check whether the month and day selected are indeed a valid date for the current year, before going on to invoke the getWeek() function for validated dates. For example, the date validation eliminates the user from getting the wrong week or an error if they select a date such as February 30th. Instead, if an incorrect date is entered, the user will get an alert message asking them to recheck the date.
function selectWeek(object) {
var today = new Date()
var year = y2k(today.getYear());
var month = object.month.options[object.month.selectedIndex].value - 1;
var day = object.day.options[object.day.selectedIndex].text;
if (isDate(year,month,day))
window.location.href = 'week' + getWeek(year,month,day) + '.htm';
else
alert('Invalid date combination -- please recheck the date and try again');
}The isDate() function simply attempts to create a date object with the year, month, and day the user selects, and compares that date object with the year, month, and day. If they match then the date is valid, and the user gets forwarded to the weekly page for the date they've selected:
function isDate (year,month,day) {
var test = new Date(year,month,day);
if ((y2k(test.getYear()) == year) &&
(month == test.getMonth()) &&
(day == test.getDate()))
return true;
else
return false
}You can test this advanced version by selecting a date from the following form:
If you want to use Monday as the first day of the week then use the following getWeek() definition:
function getWeek(year,month,day) {
var newYear = new Date(year,0,1);
var offset = 7 + 2 - newYear.getDay();
if (offset == 8) offset = 1;
if (offset == 9) offset = 2;
var daynum = ((Date.UTC(y2k(year),month,day,0,0,0) - Date.UTC(y2k(year),0,1,0,0,0)) /1000/60/60/24) + 1;
var weeknum = Math.floor((daynum-offset+7)/7);
if (weeknum == 0) {
year--;
var prevNewYear = new Date(year,0,1);
var prevOffset = 7 + 2 - prevNewYear.getDay();
if (prevOffset == 2 || prevOffset == 8) weeknum = 53; else weeknum = 52;
}
return weeknum;
}As you can see, the scripting is fairly simple, and it helps to reduce the chance of errors or problems that come along with having to remember to go back and change one simple link each week. By implementing this script, your users will be seemlessly transferred to the applicable "What's New" page, and also have the ability to select past weeks to see what they may have missed.
Extending "Born of the 4th of July"
Monday's child is full of grace