show server time including timezone offset

Question

i have some difficulties showing the actual time of the server using php and js.
on the server-side i have following php code:

$date = new DateTime();
echo $date->getTimestamp();

on the client-side if have the following js code that changes the content of a div to display the current time:

flag = true;
timer = '';


function clock()
{
        if ( flag ) {
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "backend/time_backend.php?action=serverTime", false);
            xmlhttp.send();

            var stamp = xmlhttp.responseText;


            timer = stamp*1000;
        }
        var d = new Date(timer);

        var hours = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();

        //hours = hours % 12;
        //hours = hours ? hours : 12; // the hour ’0' should be ’12'
        minutes = minutes < 10 ? '0'+minutes : minutes;
        seconds = seconds < 10 ? '0'+seconds : seconds;
        var strTime = hours + ':' + minutes + ':' + seconds;
        document.getElementById("clock").innerHTML= strTime ;

        flag = false;
        timer = timer + 1000;
}

window.onload = function() {
    setInterval(clock, 1000);
};

this works as long as the timezone of the server and mine are the same. but as soon as i change the timezone on the server, it doesn't work anymore. it still will show my local client time although the bash command date on the server shows the time in the right offset.

how do i fix this? i really need to show the server-local time.

Answer 1

You are sending in unix timestamp from PHP must be probably using

echo date("Y-m-d H:i:s", time());

if you want to use the string for creating date object using JS.

Your JS code should be

function clock()
{
    if ( flag ) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "backend/time_backend.php?action=serverTime", false);
        xmlhttp.send();

        var stamp = xmlhttp.responseText;

        var timer = new Date(stamp);
    }
    var d = new Date(timer);

    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();

    //hours = hours % 12;
    //hours = hours ? hours : 12; // the hour ’0' should be ’12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    seconds = seconds < 10 ? '0'+seconds : seconds;
    var strTime = hours + ':' + minutes + ':' + seconds;
    document.getElementById("clock").innerHTML= strTime ;

    flag = false;
    timer = new Date(timer.getTime() + 1000);
}

Answer 2

You could use an ISO 8601 formatted date.

$date = date("c", time());

Will give you one.

ISO 8601 Data elements and interchange formats – Information interchange – Representation of dates and times is an international standard covering the exchange of date and time-related data. It was issued by the International Organization for Standardization (ISO) and was first published in 1988. The purpose of this standard is to provide an unambiguous and well-defined method of representing dates and times, so as to avoid misinterpretation of numeric representations of dates and times, particularly when data are transferred between countries with different conventions for writing numeric dates and times.

You could then do Date.parse() in which will return a timestamp ;) then proceed as if you received a timestamp.

Answer 3

Date::getTimestamp always returns the Unix timestamp. Unix timestamp does not store time zone information.

Solution is to build the JavaScript Date object from the date information given by the server.

Note: The time will not go out of sync when server or the client changes time zones (i.e. DST). If avoiding requests to backend a more accurate solution would be to use a time zone library in JavaScript (e.g. timezone.js).

PHP:

$date = new DateTime;

echo json_encode(array(
    'year' => (int) $date->format('Y'),
    'month' => (int) $date->format('m'),
    'day' => (int) $date->format('j'),
    'hours' => (int) $date->format('H'),
    'minutes' => (int) $date->format('i'),
    'seconds' => (int) $date->format('s'),
));

JavaScript:

var date = null;

function updateTime() {
    if (!date) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "backend/time_backend.php?action=serverTime", false);
        xmlhttp.send();

        var j = JSON.parse(xmlhttp.responseText);
        date = new Date(
            j['year'], j['month'],
            j['day'], j['hours'],
            j['minutes'], j['seconds']
        );

        return;
    }

    // Increment time by 1 second
    date.setTime(date.getTime() + 1000);
}

function clock() {
    updateTime();

    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    hours = hours % 12;
    hours = hours ? hours : 12; // the hour ’0' should be ’12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    seconds = seconds < 10 ? '0'+seconds : seconds;
    var strTime = hours + ':' + minutes + ':' + seconds;
    document.getElementById('clock').innerHTML = strTime;
}

window.onload = function() {
    setInterval(clock, 1000);
};