Putting the Date Last Modified on Your Webpage

It should be a simple matter to use Javascript to put the date a page was updated (say January 18, 2014) at the bottom of the page.  The normal first thing to do is to search the web for a simple script to do this.  Instead of a simple script, we found a lot of people having a hard time getting the date and/or time they needed onto their web pages.  It became necessary to create a script.

document.lastModified

As in most programming languages, there are a lot of ways to do the same thing in Javascript.  One way to get a date on the page starts with the ‘document’ object and the ‘lastModified’ property.  document.lastModified returns a string that looks like this: 01/19/2014 00:26:02  It’s the date and time the page was last uploaded to the server using the server’s time.  It’s a string so we can extract what we want out of it.  Here’s the script with line numbers added for discussion purposes – they will not be in the final script:

Basic Script to Display the Last Modified Date

<script>
01. var datetimeString=document.lastModified;
02. var dateString=datetimeString.split(“/”);
03. var yearString=dateString[2].split(” “);
04. var monthNumber= Number(dateString[0]);
05. var dayNumber=Number(dateString[1]);
06. var monthArray=new Array(“Null”,”January”,”February”,”March”,”April”,”May”,”June”,”July”,”Augus t”,”September”,”October”,”November”,”December”);
07. document.write(monthArray[monthNumber]+” “+dayNumber+”, “+yearString[0]);
</script>

Line one simply takes the date/time string and puts it into a new variable for ease in remembering what’s going on. Thus, datetimeString = 01/19/2014 00:26:02 in this example.

Line two uses the split property to get parts of the string into an array.  It uses the slash that divides the date to do the split so dateString is now an array with the following values:

• dateString[0] = 01     (the month)
• dateString[1] = 19       (the day)
• dateString[2]= 2014 00:26:02  (the year and the time)

So far, so good, but we still haven’t separated out the year.

Line three splits dateString[2] based upon the space and puts it in an array called yearString.  yearString now has the following values:

• yearString[0] = 2014  (the year)
• yearString[1] = 00:26:02  (the time)

We now have access to all the elements of our date.  However, they are strings and if we don’t want the day to be ’01’ on the first of the month or the month to be 02 in February, we can easily convert those strings to numbers using  the global function Number() as seen in lines four and five.

Actually we don’t want the month to be a number at all, we want the name of the month spelled out.  One way to do that is to use the month number as an index to an array that contains the names of the months.  On line six we create that array.  Note that the first value in the array is ‘Null.’  That’s just a placeholder since there is no month numbered zero.  Now monthArray[1] = January and so on.

We didn’t really convert  dateString[0] to a number because we wanted to display it without the leading zero. We did it because we wanted to use it as an index for monthArray and indices must be numbers.

Finally, we put the date as “January 18, 2014” onto our page with line seven.  Just put the script wherever on the page you want the date to appear.

Dealing with Time Zone Differences

One issue we found with the above technique is that if your server is located in one time zone and you are located in a different time zone, your page updates may be a day off.  In our case, the server is using Greenwich Mean Time (GMT).  We are located in the pacific time zone (America/Los_Angeles or PST).  Thus, if we update a page after 4:00 PM (1600) PST, the time at the server is after midnight and it will show the update as occurring the next day.  There should be an easy fix, like adding the following line to our .htaccess file:

SetEnv TZ America/Los_Angeles

While that works great in some browsers (like Firefox on Mac) it doesn’t work at all on others (like Safari on Mac).  To get around this issue, we took the line out of .htaccess  and added some lines to our script.  Given the time difference between Greenwich and Los Angeles, if the system time (GMT) is before 08 (8am) it’s the previous day in LA (e.g. the 19th in Greenwich and the 18th in Los Angeles).  We have the system time stored in yearString[1], but we only want the hour.  The following is our modified script, again with line numbers added:

<script>
01. var datetimeString=document.lastModified;
02. var dateString=datetimeString.split(“/”);
03. var yearString=dateString[2].split(” “);
04. var monthNumber= Number(dateString[0]);
05. var dayNumber=Number(dateString[1]);
06. var monthArray=new Array(“Null”,”January”,”February”,”March”,”April”, “May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”);
07. var hourString=yearString[1].split(“:”);
08. var hourNumber=Number(hourString[0]);
09. if (hourNumber<8){dayNumber=dayNumber-1}
10. document.write(monthArray[monthNumber]+” “+dayNumber+”, “+yearString[0]);
</script>

The new line seven splits yearString[1] into an array based upon the colon’s in the time that separate hours, minutes and seconds.  The new array now has the following values:

• hourString[0] = 00  (hours)
• hourString[1] = 26 (minutes)
• hourString[2] = 02 (seconds)

We need hours but it needs to be a number rather than a string.  Line eight takes care of that.  If the time in Greenwich is earlier than 8am, it’s a day earlier here.  Line nine checks to see if the hour is less than eight.  If it is, it reduces the date by one.  Our write statement, now line 10, remains unchanged.

Getting the Date on Your Page

For those of you that want a copy/paste script, here it is, just change the value in the second to the last line to reflect the time difference between you and your server.  If you are in the same time zone as the server, you can delete that line.

<script>
var datetimeString=document.lastModified;
var dateString=datetimeString.split(“/”);
var yearString=dateString[2].split(” “);
var monthNumber= Number(dateString[0]);
var dayNumber=Number(dateString[1]);
var monthArray=new Array(“Null”,”January”,”February”,”March”,”April”,”May”,”June”,”July”,
“August”,”September”,”October”,”November”,”December”);
//since our server is on GMT and we are in PST we need to adjust by 8 hours to get the correct date:
var hourString=yearString[1].split(“:”);
var hourNumber=Number(hourString[0]);
if (hourNumber<8){dayNumber=dayNumber-1}
document.write(monthArray[monthNumber]+” “+dayNumber+”, “+yearString[0]);
</script>

Since you are likely to use this script on many pages, you can put it in a file called  lastupdate.js (without the <script> and </script> tags) and simply call the file by adding the following line to your page:

<script src=”../../javascript/lastupdate.js”></script>

Just be sure you have the path properly pointed to your javascript file.

Since this script was developed quite quickly and without much testing, you are likely to find some problems.  Let us know how it works for you in the comments below.