Like Mr. Shiny and New said, you need a server somewhere with correct time. It can be the server where you site are or some other server that sends the correct time in a format that you can read.
If you want to use the date several times on your page, one or more seconds apart, you probably don't want to get the time from the server every time, but instead cache the difference and use the clients clock. If that is the case, here is one of many solutions:
var MyDate = new function() {
this.offset = 0;
this.calibrate = function (UTC_msec) {
//Ignore if not a finite number
if (!isFinite(UTC_msec)) return;
// Calculate the difference between client and provided time
this.offset = UTC_msec - new Date().valueOf();
//If the difference is less than 60 sec, use the clients clock as is.
if (Math.abs(this.offset) < 60000) this.offset = 0;
}
this.now = function () {
var time = new Date();
time.setTime(this.offset + time.getTime());
return time;
}
}();
Include it on your page and let your server side script produce a row like:
MyDate.calibrate(1233189138181);
where the number is the current time in milliseconds since 1 Jan 1970. You can also use your favorite framework for AJAX and have it call the function above. Or you can use the solution JimmyP suggested. I have rewritten JimmyPs solution to be included in my solution. Just copy and paste the following inside the function above:
this.calibrate_json = function (data) {
if (typeof data === "object") {
this.calibrate (new Date(data.datetime).valueOf() );
} else {
var script = document.createElement("script");
script.type="text/javascript";
script.src=(data||"http://json-time.appspot.com/time.json?tz=UTC") +
"&callback=MyDate.calibrate_json";
document.getElementsByTagName('head')[0].appendChild(script);
}
}
this.calibrate_json(); //request calibration with json
Notice that if you change the name of the function from MyDate you have to update the callback in this.calibrate_json on the line script.src.
Explanation:
Mydate.offset is the current offset between the server time and the clients clock in milliseconds.
Mydate.calibrate( x ); is a function that sets a new offset. It expects the input to be the current time in milliseconds since 1 Jan 1970. If the difference between the server and client clock is less than 60 seconds, the clients clock will be used.
Mydate.now() is a function that returns a date object that has the current calibrated time.
Mydate.calibrate_json( data ) is a function that either takes an url to a resource that gives back a datetime reply, or an object with the current time (used as a callback). If nothing is supplied, it will use a default url to get the time. The url must have a question mark "?" in it.
Simple example of how to update an element with the current time every second:
setInterval(
function () {
var element = document.getElementById("time");
if (!element) return;
function lz(v) {
return v < 10 ? "0" + v : v;
}
var time = MyDate.now();
element.innerHTML = time.getFullYear() + "-" +
lz(time.getMonth() + 1) + "-" +
lz(time.getDate()) + " " +
lz(time.getHours()) + ":" +
lz(time.getMinutes()) + ":" +
lz(time.getSeconds())
;
},1000);
