A customer I was working with wanted to add a nice time Stamp on his home page. He wanted something like: “sun, 10/05/2009 13:59” to be displayed above the right navigation bar. Because the site was based on wordpress, I first tried to find if there is theres anything I can do with wordpress functions. Sadly enough there isn’t a built in function to display current date and time so I thought to write one using php date() function.

Php is a Server Side software which means that all the functions runs on the server itself which in turn submits a finished HTML page to the user. The first problem is that the site sits on a shared hosting and the provider limited the php memory size. Usually this wouldn’t risk anything but his site was loaded with custom functions and his resources were low. The second problem is that because php runs on the server, the calculated time is always the server time. Its not such a big dill if you have a small local site, but in the world of the “world wide web” your visitors can come from different time zone.

So we need something that runs on the client side and whats a better solution there is than using Java script? JS runs on the user browser, which means that the calculated time will always be the correct one. Just like php (and every other programing language) JS also has a time class that can handle time. In this script I used the next functions:

getDay() – returns a number from 0 to 6 that represent the week day.
getMount() – returns a number from 1 to 12 that represent the mount number.
getFullYear() – returns the year in a YYYY format (2009)
getDate() - returns a number from 1 to 31 that represent the day in the month .
getTimezoneOffset() – This function returns the difference between UTC to local time in minuts
getUTCHours() – Returns the current UTC hour.
getUTCMinutes() - Returns the current minute.

Ok, a bit of code explanations.
As I said, getDay() returns a value of 0-6 that represent the weekday which is not so easy to format as The Day. Thats why on lines 3-6 I defined an array which holds the textual representation of the weekday by the numbers that getDay returns.
The other problem that I had was what days, months, hours and minutes that were smaller than 10, due to the fact that I didn’t want to get something like 1:9 as the time (instead of 01:09) – my date was to be formated as dd.mm.yyyy hh:mm.
So, as one can see in lines 13,16,21 and 23 – I checked if the result is smaller than 10 and if so added a leading zero.
In line 18 I get the offset between UTC time and user time. While in the real life we usually subtract our time from UTC time to get the difference this function works in the opposite way. It subtracts the UTC time from the local time. The value is the same but the sign is in the wrong direction. If you live in UTC+2 the function returns -120 (Minuter) and not +120. thats why in line 19 I had to subtract the difference.
The %24 at the end of line 19 deals with the case that the calculated value is bigger than 24 (12 AM) if the hour is 23 for example and the difference is +3 than we can get 26 as the hour. 26%24 (modulo) returns the remainder of the division – 2 in our case.

Line 27 injects the combined string to the HTML page in a div called “maimDate”. That means that we need to place in our HTML code a match div:

Now, we need to place the javaScript at the bottom of the page in order for it to run only after the mainDate div was created and there you go – a nice Time Stamp customized to the user time settings.