Date script

If only this would get me a date!

The only thing that this script is good for is displaying the current date on your site.

It does this using a combination of CSS and Javascript DOM trickery. Lets jump right in and start with the basics.

Placing the date in your home page

The code below shows what the script expects to see in the place where you want the date to be

<span class="DateHere"></span>

That's the simple part.

The Javascript

We remove the javascript using the techniques set out in the article 'Externalising Javascript'

We are going to create a function initDate that will do all the work of generating the date and returning it in the proper format. The function initDate needs to scan the page to find any <span class="DateHere"></span>. It does this using getElementsByTag, scanning through the resulting array and then calls the date function itself and uses innerHTML to display the result.

I could create a new text node to the span element and place the content that way but I prefer innerHTML as we are only placing the info once - I prefer nodes when the content is going to be changed by user interaction as innerHTML has some problems in various browsers when used more than once on the same element.

function initDate() {
    if ( document.getElementsByTagName ) {
        var Temp = document.getElementsByTagName("span");
        for ( i = 0 ; i < Temp.length ; i++ ) {
            if ( String(Temp[i].className).indexOf("DateHere") != -1 ) {
                Temp[i].innerHTML = ShowDate();
            }
        }
    }
}

And now the date function.

var Months = new Array("January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" );

var Days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday");

function ShowDate() {
    var PostFix = new Array("st","nd","rd","th");
    var Now = new Date();
    theYear = Now.getYear();
    if ( theYear < 1000 ) theYear += 1900;
    theMonthNum = parseInt(Now.getMonth());
    theMonthName = Months[ theMonthNum ];
    theDay = Now.getDate();
    wDay = Days[ parseInt(Now.getDay()) ];
    Temp = String(theDay);
    Temp = Temp.substring( Temp.length - 1 , Temp.length );
    if ( parseInt( Temp ) > 3 ) Temp = 4;
    if ( parseInt( Temp ) == 0 ) Temp = 4;
    if ( theDay > 10 && theDay < 21 ) Temp = 4;
    DayTH = PostFix[Temp-1];
    theHour24 = Now.getHours();
    if ( theHour24 > 11 ) { var AmPm = "pm" }
    else { var AmPm = "am" }
    theHour = ( (theHour24 + 11) % 12 ) + 1;
    theMinute = Now.getMinutes();
    theSeconds = Now.getSeconds();
    return( wDay + ", " + theDay + DayTH + 
        " of " + theMonthName + " " + theYear );
}

Just change the string returned from the ShowDate function to change the format of the date. Or if you need different date formats on each page, you can use the same script and surround each part of the date with a span like so:

return( '<span class="DayName">' + wDay + ', </span>' +
    '<span class="DayOfMonth">' + theDay + PostFix[Temp-1] + ' of </span>' + 
    '<span class="MonthName">' + theMonthName + '</span>' + 
    '<span class="MonthNumber">' + theMonthNum + '</span>' + 
    '<span class="Year">' + theYear + '</span>' );

Putting it all together

This is no 'rock star' script but click here to see it in action »