Date and time

  • This is a Version 2 script.
  • The day names do not work in Netscape 2.
  • Explorer on Mac does not take daylight saving time into account. One reader even reported a 7 hour difference between real time and Explorer on Mac time.
  • I've heard, but not tested, that Escape and Ice Browser don't take daylight saving time into account.
  •  

    On this page I give a script to print out the present time and date, both in 24hrs format and in am/pm format. Many people want this on their website, no doubt because otherwise surfers would completely forget what time and date it is.

    First of all a reminder: this script prints out the date and time according to the system the browser is on. If this system time is wrong, there's nothing you can do about it.

    Example

    Below you should see the correct time and date according to your system. If something is not correct, please tell me what browser you're using and what you are seeing.

    The script

    This is the script for 24hrs format. Later I'll give the addition you need for am/pm format.

    var Days = new Array('Sunday','Monday','Tuesday','Wednesday',
    	'Thursday','Friday','Saturday');
    
    var today = new Date();
    var Year = takeYear(today);
    var Month = leadingZero(today.getMonth()+1);
    var DayName = Days[today.getDay()];
    var Day = leadingZero(today.getDate());
    var Hours = leadingZero(today.getHours());
    var Minutes = leadingZero(today.getMinutes());
    var Seconds = leadingZero(today.getSeconds());
    
    function takeYear(theDate)
    {
    	x = theDate.getYear();
    	var y = x % 100;
    	y += (y < 38) ? 2000 : 1900;
    	return y;
    }
    
    function leadingZero(nr)
    {
    	if (nr < 10) nr = "0" + nr;
    	return nr;
    }
    

    Explanation

    As explained on the Introduction page, first we create a Date object and then we read out various bits of information:

    var today = new Date();
    var Year = takeYear(today);
    var Month = leadingZero(today.getMonth()+1);
    var DayName = Days[today.getDay()];
    var Day = leadingZero(today.getDate());
    var Hours = leadingZero(today.getHours());
    var Minutes = leadingZero(today.getMinutes());
    var Seconds = leadingZero(today.getSeconds());
    

    I wanted to make the information more user friendly, so the code has become slightly more complex. I added the following things to the basic methods:

    leadingZero()

    First of all, I want to add a "0" to each number that's smaller than 10. I use this function:

    function leadingZero(nr)
    {
    	if (nr < 10) nr = "0" + nr;
    	return nr;
    }
    

    I give it a number and if the number is smaller than 10, it adds a "0" in front of it. It then returns the number to whatever JavaScript line asked for it. So when I calculate the seconds number, I do

    var Seconds = leadingZero(today.getSeconds());
    

    First I do today.getSeconds(), then I send the resulting number through leadingZero() and only then I put the number in Seconds for output to the screen later on.

    The day name

    I want to print out the name of the day, so I need an extra array that stores the names of the days:

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

    Sunday is day 0, Saturday is day 6, both in the array and in the Date() object. today.getDay() gives us the day number and we take the corresponding name from the array Days[].

    var DayName = Days[today.getDay()];
    
    The month

    The months are numbered from 0 to 11. If you only want to print out the month number, add 1 to today.getMonth().

    var Month = leadingZero(today.getMonth()+1);
    

    If you want to print out the name of the month, make an array Months[] and do the same as for the names of the days:

    var Month = Months[today.getMonth()];
    
    The year

    As explained on the Introduction page we need this function to read out the correct year:

    function takeYear(theDate)
    {
    	x = theDate.getYear();
    	var y = x % 100;
    	y += (y < 38) ? 2000 : 1900;
    	return y;
    }
    

    and call it like

    var Year = takeYear(today);
    

    am and pm

    Finally, what to do if you want the output formatted in am/pm. You need to check the Hours and add an extra variable, ampm that is either "am" or "pm".

    Replace

    var Hours = leadingZero(today.getHours());
    

    by

    var Hours = today.getHours();
    var ampm = "am";
    if (Hours == 0) Hours = 12;
    if (Hours > 11)
    	ampm = "pm";
    if (Hours > 12)
    	Hours -= 12;
    Hours = leadingZero(Hours);
    

    If Hours is 0, it should be read as 12:xx am.
    If Hours is larger than 11, set ampm to pm. If in addition Hours is larger than 12, subtract 12 from it and set ampm to "pm". Send the number through leadingZero() only after the if() statement.

    Output

    Finally, document.write the date in the format you like. For instance:

    document.write (Hours + ':' + Minutes + ':' + Seconds + ' '
    	+  DayName + ' ' + Day + '-' + Month + '-' + Year);
    

    for European format or

    document.write (Hours + ':' + Minutes + ':' + Seconds + ' ' + ampm
    	+ ' ' +  DayName + ' ' + Month + '-' + Day + '-' + Year);
    

    for American format.

    Home