...

View Full Version : How can I add the time to my Page Update?



Rick5150
12-19-2011, 02:45 PM
I am using the following code to show visitors when my page was updated last.

It seems really cumbersome for what it does, too.

Right now, it reads:

Last updated on Monday, December 19, 2011

I wanted to add code to it so that it reads the hours and is in this format:

Last updated on Monday, December 19, 2011 at 8:44am

How can I add the "at hh:mm am/pm" part? Or is there easier code that will do this? Thank you in advance.


function getLongDateString()
{month = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
dayOfWeek = this.getDay();
day = dayNames[dayOfWeek];
dateOfMonth = this.getDate();
monthNo = this.getMonth();
month = month[monthNo];
year = this.getYear();
if (year < 2000)
year = year + 1900;
dateStr = day+", "+month+" "+dateOfMonth+", "+year;
return dateStr;
}
//register the method in the class Date
Date.prototype.getLongDateString=getLongDateString;

function DocDate()
{ //return the document modification date (excl.time)
//as a string
DateTimeStr = document.lastModified;
secOffset = Date.parse(DateTimeStr);
if (secOffset == 0 || secOffset == null) //Opera3.2
dateStr = "Unknown";
else
{
aDate = new Date();
aDate.setTime(secOffset);
//use method defined above
datestr = aDate.getLongDateString();
}
return dateStr;
}

document.write("<left> Last updated on ");
document.writeln(DocDate(),"</left>");

Philip M
12-19-2011, 04:28 PM
It seems really cumbersome for what it does, too.


Too right! Ancient and deprecated code!

Try this:-



<body onload = "getDateUpdated()">
<span id = "lastMod"></span>

<script type = "text/javascript">

function getDateUpdated() {

var m = ['January','February','March','April','May','June','July','August','September','October','November',' December'];
var d = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var AMPM = "am";

var thisDate = new Date(document.lastModified);
var yr = thisDate.getFullYear();
var mn = thisDate.getMonth();
var dy = thisDate.getDay();
var dt = thisDate.getDate();
var hr = thisDate.getHours();
var min = thisDate.getMinutes();
if (hr >= 12) {AMPM="pm"}
if (hr>12) {hr-=12}
if (hr==0) {hr=12};
if (min<10) {min="0"+min}

var result = "Last updated on " + d[dy] +", " + m[mn] + " " + dt + ", " + yr + " at " + hr +":" + min + AMPM
document.getElementById("lastMod").innerHTML = result;
}

</script>


Label on Sainsbury's peanuts -- "Warning: contains nuts."

venegal
12-19-2011, 04:36 PM
That piece of code is pretty bad in that it thoroughly pollutes the global namespace. It's pretty old, too, as it uses the deprecated method getYear, and does some extra work for the almost 15 year old Opera 3.2.

Generally speaking, you can't easily format dates in Javascript, like you can in PHP for instance, but it doesn't have to be as bad as that script of yours.

Have a look at this piece of code:


Date.prototype.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Date.prototype.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
Date.prototype.getLongDateString = function () {
var pad = function (number) {return number < 10 ? '0' + number : String(number);};
var dateString = this.dayNames[this.getDay()] + ', ' + this.monthNames[this.getMonth()] + ' ' + this.getDate() + ' ' + this.getFullYear();
return dateString + ' at ' + ((this.getHours() + 11) % 12 + 1) + ':' + pad(this.getMinutes()) + (this.getHours() < 12 ? 'am' : 'pm');
};

alert('Last updated on ' + new Date(document.lastModified).getLongDateString());

venegal
12-19-2011, 04:45 PM
Philip M: Your logic for deciding between am and pm is off: The hour after noon is supposed to be pm, not am.

Philip M
12-19-2011, 04:51 PM
Philip M: Your logic for deciding between am and pm is off: The hour after noon is supposed to be pm, not am.

Oh dear! :o Corrected.

Rick5150
12-19-2011, 10:05 PM
I am sorry - I am not used to new clean code. How do I call this script from the HTML page? I just overwrote my last_update.js file and that was a dismal failure.

Philip M
12-19-2011, 10:42 PM
I am sorry - I am not used to new clean code. How do I call this script from the HTML page? I just overwrote my last_update.js file and that was a dismal failure.

Just place the code I gave you in post #2 in your webpage. You can best place the script within the <head> section, or if you wish within an external .js file (without the <sciript> </script> tags). It is called by <body onload = "getDateUpdated()">

Rick5150
12-19-2011, 11:02 PM
I am sorry, I still do not understand. I placed the code between the <script></script> tags into a file called last_update.js

The old code was placed as follows:


<h2>Welcome to FILMJACKETS.COM! (and pardon our ongoing construction!)</h2>
<p style="color:#D9B922"><em><script type="text/javascript" src="website/javascript/last_update.js"></script></em></p>

And it worked fine. I expect that I have to do something with this code, but I am still not clear what.


<body onload = "getDateUpdated()">
<span id = "lastMod"></span>

I just don't want to mess it up any more than I already have...


Here is the test page if that helps at all... http://www.ricktheriault.net/new/test.html

Philip M
12-20-2011, 08:55 AM
I am sorry, I still do not understand. I placed the code between the <script></script> tags into a file called last_update.js

The old code was placed as follows:


<h2>Welcome to FILMJACKETS.COM! (and pardon our ongoing construction!)</h2>
<p style="color:#D9B922"><em><script type="text/javascript" src="website/javascript/last_update.js"></script></em></p>

And it worked fine. I expect that I have to do something with this code, but I am still not clear what.


<body onload = "getDateUpdated()">
<span id = "lastMod"></span>

I just don't want to mess it up any more than I already have...


I don't really see how to expand on the advice I gave you in post #7. :o
Replace your existing external .js file with the script code given to you.
The external .js file must not contain any HTML (<script>) tags. Just the code in between.

Change your <body> tag to <body onload = "getDateUpdated()">

Place <span id = "lastMod"></span> in you webage where you want the message to appear.

Make sure that your .js file is uploaded to the right directory.

Rick5150
12-20-2011, 12:45 PM
It is not you. The advice is certainly clear, but the script does not work on the page that I want to use it on. I put the <body onload = "getDateUpdated()"> right into the page template and it appears on both pages if you view the source.

This page has the <script type="text/javascript" src="website/javascript/last_update.js"></script><span id = "lastMod"> code and it works fine:

http://www.ricktheriault.net/new/delete-jacket-page.html

This page has the same code - copied and pasted from the page above where it works, but it does not show.

http://www.ricktheriault.net/new/test.html

If you view the page source code you can see that both pages reference the same javascript file location, so that is not the problem.


I tried removing the javascript scroller from the test.html page to see if there was interference, but could find none.
I tried removing the paragraph style.
I tried locating the code elsewhere.


It is not the code or your instructions by any means. I have an issue elsewhere that is not allowing this to work, I guess. It nice clean code too and it needs to work on this one page. Figures...

venegal
12-20-2011, 01:39 PM
It is not the code or your instructions by any means. I have an issue elsewhere that is not allowing this to work, I guess. It nice clean code too and it needs to work on this one page. Figures...

Your problem is the fact that Philip's suggestion uses DOM level 0 event handling, which means every element can only have one event handler per event. Some other piece of code in that page overwrites that handler with another one, so that date code will never run.

Since you were talking about clean code, here are a few things that clean code should not do:

- It should not interfere with other code. That means it should not put anything into the global namespace (which your current code does), and it should not use DOM level 0 event handling (which your current code does too).

- It should not require you to make changes to your HTML (apart form putting in a script tag, obviously), and it should not make any assumptions about your HTML and break if they are not met. In your current code you added an inline event to the body tag, which isn't great, and you put that script tag somewhere in the middle of the body (you didn't have to do that), which makes it harder to maintain. Also, if there isn't actually an element with id 'lastMod' in your HTML, the code will break, which isn't great either.

If you want to do this cleanly, it should absolutely suffice to put the script into the head, without having to do anything else. If some element has the id 'lastMod', it should do its thing without interfering with other code, if not, it shouldn't break anything.

Here's how such a piece of code could look like (based on the example I gave you earlier):


Date.prototype.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
Date.prototype.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
Date.prototype.getLongDateString = function () {
var pad = function (number) {return number < 10 ? '0' + number : String(number);};
var dateString = this.dayNames[this.getDay()] + ', ' + this.monthNames[this.getMonth()] + ' ' + this.getDate() + ' ' + this.getFullYear();
return dateString + ' at ' + ((this.getHours() + 11) % 12 + 1) + ':' + pad(this.getMinutes()) + (this.getHours() < 12 ? 'am' : 'pm');
};

(function () {

function addLastModifiedDate() {
var lastModEl = document.getElementById('lastMod');
if ( ! lastModEl) return;
lastModEl.innerHTML = 'Last updated on ' + new Date(document.lastModified).getLongDateString();
}

if (window.addEventListener) {
window.addEventListener('load', addLastModifiedDate, false);
} else if (window.attachEvent) {
window.attachEvent('onload', addLastModifiedDate);
}

}());


Btw, the script that messes yours up by using DOM level 0 event handling is slider_images.js. It's bad that it does that, but as long as it's the only piece of code that does it, and you keep your own code clean, it won't hurt you.

Rick5150
12-20-2011, 02:54 PM
Absolutely brilliant. I am new to the forum and have zero knowledge of javescript (as you can see). This is a big help. Now it looks as if I need help with the image scroller? The code was free, and I was so happy I was able to figure it out as I mainly work with HTML and I am just starting to learn CSS. This is all Greek to me and I really appreciate all of the help from everyone here.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum