Dates, dates, and more dates…


We get a lot of requests from people who want to put the current date on their Web pages, so I thought I would start my first official FrontPage tip with code to help accomplish this.


There are a couple ways that you can get the current date onto your Web pages.  One uses client-side JavaScript, the other uses server-side code.  As always, there are advantages and disadvantages to both.  The code I’m including in this post is for client-side JavaScript because generally you want the user to see the date that they have on their local machine.  Server-side dates take their dates from the server, which could be all the way on the other side of the world.  Probably the only disadvantage to JavaScript is that users can turn scripting off in their browser.  However, if they do this, the worst that happens is that the visitor doesn’t see the date.


Just because I like to be difficult, I’m including several renditions of the code, each display the date slightly differently.


To use any of these you just insert the one you want into a script block in the HEAD section of your page, and put an inline script block, like the following, that names the function, where “GetTodaysDate” in the following example is the name of the function.

<script language=”javascript”>document.write(GetTodaysDate());</script>

Dates and Times


6/11/2004:
This one displays the current date in short format:

function GetTodaysDate(){
var oDate = new Date();
var sDate = oDate.getMonth() + “/” + oDate.getDate() + “/” + oDate.getYear()
return sDate;
}

Friday, 6/11/2004:
This one displays the day of the week and then the current date in short format:

function GetTodaysDayAndDate(){
var oDate = new Date();
var iDay = oDate.getDay();
var sDay;

switch (iDay){
case (0) :{sDay = “Sunday”; break;}
case (1) :{sDay = “Monday”; break;}
case (2) :{sDay = “Tuesday”; break;}
case (3) :{sDay = “Wednesday”; break;}
case (4) :{sDay = “Thursday”; break;}
case (5) :{sDay = “Friday”; break;}
case (6) :{sDay = “Saturday”; break;}
}
var sDate = oDate.getMonth() + “/” + oDate.getDate() + “/” + oDate.getYear()
return sDay + “, ” + sDate;
}


Fri Jun 11 2004:
This one displays the day of the week and then the current date in pseudo short format:

function GetTodaysDateLongFormat(){
var oDate = new Date();
var sDate = oDate.toDateString();
return sDate;
}

17:32:
his one shows the time. It’s in military format, but the following example uses code that uses AM and PM.

function GetTime(){
var oDate = new Date();
var sTime = oDate.getHours() + “:” + oDate.getMinutes();
return sTime;
}

5:32 PM:
This one shows the time in AM / PM format.

function GetTimeLong(){
var oDate = new Date();
var iHour = oDate.getHours();
var sAmPm;

if (iHour < 13)
{
sAmPm = “AM”;
}
else
{
iHour = iHour – 12;
sAmPm = “PM”;
}
var sTime = iHour + “:” + oDate.getMinutes() + ” ” + sAmPm;
return sTime;
}


6/11/2004, 5:32 PM:
And, finally, this one shows you date AND time.

function GetDateTime(){
var oDate = new Date();
var sDate = oDate.getMonth() + 1 + “/” + oDate.getDate() + “/” + oDate.getYear();
var iHour = oDate.getHours();
var sAmPm;

if (iHour < 13)
{
sAmPm = “AM”;
}
else
{
iHour = iHour – 12;
sAmPm = “PM”;
}
var sTime = iHour + “:” + oDate.getMinutes() + ” ” + sAmPm;

return sDate + “, ” + sTime;
}

Comments (15)

  1. Jerry Pisk says:

    If the user is on the other side of the world than your server than the fact that he speaks different language than English or speaks English but uses different date format is going to be bigger problem then the time offset… Not a very good argument against server side code 🙂

  2. Am I the only one that prefers to use ISO 8601 dates in everyday life? I always write out 2004-06-12… So clean and unambiguous!

  3. Lisa Wollin says:

    Jerry and Jean-Philippe make some very good points! My apologies. It was arrogant of me to think in terms of US date/time formats. Therefore, I should tell you that JavaScript provides a three methods that you can use to display dates and times in the local date and time formats.

    toLocaleDateString() : shows the date in the format on the client machine.

    toLocaleString() : shows the date and time in the format on the client machine

    toLocaleTimeString() : shows the time in the format on the client machine.

    You can modify the GetTodaysDateLongFormat function above to use the local date and time format. These actually make the code much simpler and more flexible than trying to parse the date and time to morph it into any specific format.

  4. Westin says:

    How do you do this in SharePoint using FrontPage as it does not allow JavaScript on WebPartPages?

  5. Lisa Wollin says:

    Hi, Westin,

    Yes, you can combine JavaScript with SharePoint pages. In fact, you can combine JavaScript with ASP.NET pages also.

    With SharePoint pages, all you need to do is pull the page into FrontPage and switch to Code view. Then add the date script code to a new script tag in the head section and place the document.write script tag wherever in the document that you want to display the date. This must be outside of a web part tag, but otherwise, can be anywhere on the page where you would be able to add it on a regular Web page.

    Hope this helps.

  6. Simon says:

    Hi. I’ve copied the script :

    function GetTodaysDateLongFormat(){

    var oDate = new Date();

    var sDate = oDate.toDateString();

    return sDate;

    }

    but i can’t see anything, even after i’ve uploaded it. What am I doing wrong? can you offer a solution??

  7. sadiq says:

    Hi, I have this in my table

    Beginning                       End

    22/04/2003 10:00          23/04/2003 01:00

    What is the query that can tell me the number of minutes between them??For this Eaxample, I want the query to show me this:

    Beginning                       End                                 Interval

    22/04/2003 23:00          23/04/2003 01:00          120 minutes

  8. sadiq says:

    Hi, I have this in my table

    Beginning                       End

    22/04/2003 10:00          23/04/2003 01:00

    How to do it in sharepoint – can tell me the time difference between them??For this Eaxample, I want  to show:

    Beginning                       End                                 Interval

    22/04/2003 23:00          23/04/2003 01:00          120 minutes

    please reply to sadiq@giordano.com.sa

  9. Kelley Bentley says:

    Thanks very much. I have had this questions for a long time now!!

  10. Steve says:

    Hi,

    I’ve tried a few different formats, and it displays the wrong month.  It seems to be x-1, meaning May 1st shows as 4/1/xx.

    I’ve double-checked my system clocks/calendars on both client and server, and both are correct.

    Am I missing something?  Please help.

    Thanks

    Steve

  11. Andy Ginn says:

    This is useful stuff.

    Do you know how to change all date formats for all dates displayed on standard pages (both WSS and SPS) to use ISO code formats, or non-standard regional formats?  I have changed the regional settings, for example to UK, and the dates are displayed as expected, eg dd/mm/yyyy, but if I want ISO or, for example dd/mmm/yyyy how do I do that?

    Thanks,

    Andy

  12. Lester says:

    Hi Steve

    > It seems to be x-1, meaning May 1st shows as 4/1/xx.

    It *is* X-1.  Months start at zero (ie January) for some reason…!

  13. caj says:

    I want to add several different time zones, "times" to a web page can you help

  14. caj says:

    the three I wanted to add were NY, London and Tokyo

  15. markj says:

    > It seems to be x-1, meaning May 1st shows as 4/1/xx.

    >It *is* X-1.  Months start at zero (ie January) for some reason…!

    I added a +1 to the code, oDate.getMonth()+1

    It then worked, but don’t know what will happend in december….