ServerDate to JavaScript

ServerDate to JavaScript
Version 2.1
(Another donateWare script from MRE Software)

My server time:
Your system:

xxx
xxx

I have a page on a website with a calendar JavaScript which posts upcoming dates. I wanted to control the initialization date on this script from the server as opposed to using the client computer's local date. I went looking around on the web for a "quick fix" but what I found involved either renaming the page with a php or shtml extension and using php or a server side include. Since this just happened to be the long established home page to my site, I didn't want to change the name. After some thought, I came up with a solution to the problem. Since I have used so many other scripts and ideas from the web, I thought I would give one back.

A little more explanation... This time business is a "can of worms". What this actually does is set a JavaScript variable, on the client's machine, to the actual time on the webserver. This variable is expressed as a local time. Confused? Maybe an example will help. Example: It is 07:21:00 on my server located in lets say Chicago (central time). A user in San Francisco (pacific time) brings up my website. When this routine is called, the variable servertimeOBJ will return the time in Chicago (+2 hours ahead of SF) ServertimeOBJ will be 07:21:00 with the appropriate date etc. as required. If I use servertimeOBJ to adjust my scripts, the SF user will see dates/times in Chicago. Lets say I have a clock on the site...When the SF user pulls up the site the clock will display 07:21:00 to him even though it is 05:21:00 at his location. He sees Chicago time. This script can be edited, modified, adjusted, whatever to suit your exact needs, hopefully it demonstrates some useful concepts.

First of all you will need to be able to run PHP or other server side programs on your server as you can't query the date from it without this ability. In my case I used the small PHP program below to get the date and pass it back to the page via a JavaScript variable. You will need to set the default time zone for your server inside the script variable $myTimeZone. Version 2.0 of this script uses the newer PHP time zone identifiers. A complete list of time zones can be found here: http://www.php.net/manual/en/timezones.php

Here are some common time zones for the USA.

Atlantic => America/Puerto_Rico (no DST)
Eastern => America/New_York
Central => America/Chicago
Mountain => America/Denver
Pacific => America/Los_Angeles
Alaska => America/Juneau
Hawaii => Pacific/Honolulu (no DST)
Arizona => America/Phoenix (no DST)

<?php // This is version 2.1 it takes advantage of newer PHP date time zone functions // Copyright 2012 Emery Wooten - www.mresoftware.com // Name this program servertime.php and place it in the main part of your site. // This program is called from Javascript. // It gets the server time and date and sets a JavaScript variable. // The variable servertimeOBJ, is set to the server time. // The variable TimeZone is set to the time zone abbreviation => EST, CDT, PST, etc. // This should be called before any JavaScripts that use the date. // // Example call in html page: // <script language="JavaScript" src="http://yoursite.com/servertime.php"></script> // The statement above can even be placed in the <head> section of your page. // // Supress errors error_reporting(0); // // This version uses the new PHP supported timezones which do DST calculations automatically // See this page: http://php.net/manual/en/timezones.php to find the time zone you want to be the server default. // Set the $myTimeZone variable to the zone you selected. The default is for Central Time with DST change ie. America/Chicago // $myTimeZone = 'America/Chicago'; // // DO NOT EDIT below this line date_default_timezone_set($myTimeZone); // set the server default timezone $date = new DateTime(); //set the $date variable to the current date/time $serverdate = $date->format('Y,m-1,d,H,i,s'); // format the date in a form acceptable to JavaScript $zone = $date->format('T'); // get the time zone abbreviation ie. CST, PDT, EDT, etc. print "var servertimeOBJ = new Date($serverdate);var TimeZone = '$zone';"; // Output/create the JavaScript variable servertimeOBJ set to the server time and also set the JavaScript variable TimeZone = EST, CDT, etc. ?>

Once you have servertime.php installed on your site, you will need to call it from your html page. The example included in the PHP code above is all you need to do. Of course you should replace "yoursite.com" with the URL of your website. Call this BEFORE you call any other JavaScripts that need the date/time variable.

In the example below I have a complete html page which calls the servertime.php file in the head section and then runs a JavaScript which uses it to display the date+time on the server. You can take this basic code and incorporate it into your own scripts.

<html> <head> <title>Server time demo</title> <script language="JavaScript" src="http://www.yoursite.com/servertime.php"></script>  <script language="JavaScript"> var deltaD = (servertimeOBJ.getTime())-(new Date().getTime()); // Although servertimeOBJ is the server time when the script is called, it never changes unless the PHP script is called again. // Using the deltaD variable allows you to do ticking server time clocks since you can repeatedly fetch the client time and add deltaD to it. var displaySeconds = true; // set to false for one minute display ie. 6:43 PM (ticks once per minute) var interval; //define the tick interval variable // function textdates(){ getthedate(); if (document.all||document.getElementById) t=setTimeout("textdates()", interval); // The calculated interval only changes the screen when it needs it. } // function getthedate(){ var clientDate = new Date(); var serverdate = new Date(clientDate.getTime()+deltaD); var month=serverdate.getMonth()+1; var day=serverdate.getDate(); var year=serverdate.getFullYear(); var hours=serverdate.getHours(); var minutes=serverdate.getMinutes(); var seconds=serverdate.getSeconds(); var dn="AM"; if (hours>=12){dn="PM";} if (hours>12){hours=hours-12;} if (hours==0){hours=12;} if (minutes<=9){minutes="0"+minutes;} if (month<=9){month="0"+month;} if (day<=9){day="0"+day;} // if (displaySeconds){ if (seconds<=9){seconds="0"+seconds;} var cdate=month+"/"+day+"/"+year+" ... "+hours+":"+minutes+":"+seconds+" "+dn+" "+TimeZone; interval = 1000 - serverdate.getMilliseconds(); // The calculated interval only changes the display exactly on the second. } else{ var cdate=month+"/"+day+"/"+year+" ... "+hours+":"+minutes+" "+dn+" "+TimeZone; interval = (60-seconds)*1000; // The calculated interval only changes the display exactly on the minute. } // if (document.all) document.all.sTime.innerHTML=cdate; else if (document.getElementById) document.getElementById("sTime").innerHTML=cdate; else{ document.write(cdate); } } </script> </head> <body onLoad="textdates()" bgcolor="#000080"> <p align="center"><i><b><font size="6" color="#FFFFFF">Server Time Script Demo</font></b></i></p> <p align="center"> <font color="#FFFFFF"> <b><font size="5">The date and time on your server is: <span id="serTime">getting server time...</span></font></b></div> </font></p> <p align="center"> </p> <p align="center"><font color="#FFFFFF">If you use these scripts or ideas, your donation is appreciated.</font></p> </body> </html>

Just for fun, mouse over the time display in this example of the script above to see a twist. Server time = getting server time ...

This was done with OnMouseOver/OnMouseOut events using html code like the sample below:
<span id="sTime" OnMouseOver="displaySeconds=true;textdates();" OnMouseOut="displaySeconds=false;">getting server time ...</span>

The date and time in red at the top of this page was produced using the methods detailed herein. If you change your local computer date by say two months, change the time zone, daylight time, whatever, so that it is wrong, and refresh this page you will see that the red date/time remains the same and displays the date and time from the server, not from your local system. You can view the source code of this page for more details... This is a standard html page and uses no Server Side Includes. To download the JavaScript code that uses the servertimeOBJ variable and actually displays the ticking times at the top of this page,

If you find this code of value, donate a little to the cause. Think of the time you just saved!

USE AT YOUR OWN RISK!

Questions / Comments? Email me.