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;
}