mtdev

How to display visitors' localtime using JavaScript and PHP without even asking them to select their timezone.

The decision

This can be done with the help of a little piece of JavaScript and the use of a server-side language like PHP, ASP, JSP or any other available to you.

In the example I will show I have used PHP with it's built-in session support (available since PHP 4.0).

Q: But why use JavaScript at all when PHP has it's own localtime() function?

A: PHP's localtime() function will give you the server local time not the user's and that's not what we want.

The concept

We want to show the visitor his/her local time, so what we need is way to get his time zone offset. We can do that in JavaScript with the help of the Date method getTimezoneOffset and then send it to the server to be saved as a session variable. We send this info by modifying all links in the document that point within our site by appending a query variable, e.g. we add ?offset=-180 if the link has no other query variables set. If it has then we add ;offset=-180.

Note: The additional query parameter is separated from the others with ; not & as the latter one has to be escaped as & in HTML.

When we have this info about the user we don't want him/her to send it over and over again as we have it already saved in our session so we don't send the JavaScript then. When displaying the time we use a function that adds the visitors offset to the time and then prints a string identifying the time zone.

An alternative that is not recommended though is to send the browser JavaScript code that uses document.write() to print the date.

Example code

JavaScript code

<?php
session_start();

if ( !isset($_SESSION['offset']) ) {
?>
  <script type="text/javascript">
  window.onload = setLinks

  function setLinks() {
    now = new Date()
    offset = now.getTimezoneOffset();

    for ( i = 0; i < document.links.length; i++ ) {
      with ( document.links[i] ) {
        if ( href.indexOf('http://martin.f2o.org') == 0 ) {
          if ( href.indexOf('?') == -1 ) {
            href += '?offset=' + offset;
          } else {
            href += ';offset=' + offset;
          }
        }
      }
    }
  }
  </script>

<?php
}
?>

We start by opening a PHP code block, and check if our session variable identifying that the user's time zone has been saved is not set. If it isn't then we should send the JavaScript code to the browser to process the links in the document.

Note: Opera 5 and 6 for Linux and Windows has a bug that causes it to strip out trailing slashes from URI's that may cause problems sometimes.

Now for that JavaScript: we first set a handler via window.onload = setLinks. This will execute the setLinks function upon loading of the document, i.e. all external images/CSS/JavaScript has been downloaded and the page is displayed.

The setLinks function will then create a new Date() to get the visitor's time zone, and will loop through all links in the document modifying them as mentioned earlier.

The server code (PHP in our case)

if ( !isset($_SESSION['GMT_offset']) ) {
  $_SESSION['GMT_offset'] = 0;
  $_SESSION['GMT_offset_str'] = '+0:00';
}

This code just sets default values for the GMT offset it none are stored in the session.

Note: In the whole example the new PHP 4.1 style session array is used. If you want to run that code in a previous version of PHP just change $_SESSION to $HTTP_SESSION_VARS, the former is also globally available and the latter has to be imported from the global namespace within functions with a declaration like:

global $HTTP_SESSION_VARS

track_vars must be on, use: php_flag track_vars true in a .htaccess file to achieve this, or set it directly in php.ini.

if ( isset($_GET['offset']) ) {
  $_SESSION['offset'] = $_GET['offset'];
  set_timezone($_GET['offset']);
}

This piece of code checks if the browsers sent a query parameter offset, if so sets the time offset to it by calling the set_timezone function (explanation of the function is given below).

function set_timezone( $offset ) {
  if ( $offset ) {
    $offset = -$offset;
    $_SESSION['GMT_offset'] = 60 * $offset;
    $GMT_offset_str = ( $offset > 0 ) ? '+' : '-';
    $GMT_offset_str .= floor($offset / 60) . ':';
    $GMT_offset_str .= (($offset % 60) < 10 ) ?
      '0' . $offset % 60 : $offset % 60;
    $_SESSION['GMT_offset_str'] = $GMT_offset_str;
  }
}

Now that's the function that does the hard work, it checks if there is an offset from GMT, if so negates its value (if you are located in a GMT +3:00 time zone the JavaScript function getTimezoneOffset() returns -180, i.e. the time in minutes that should be added to your local time to turn it into GMT).

Then we store the offset in seconds in a session variable, and process to the more complicated code that just sets the suffix that identifies the time zone.

function format_datetime( $date ) {
  return ( date('d M Y g:ia', $date + $_SESSION['GMT_offset']) .
  ' GMT ' . $_SESSION['GMT_offset_str']);
}

The format_datetime function is used to display local time, its parameter is an Unix timestamp (a 32-bit unsigned integer representing the number of seconds since the Unix Epoch - 1 Jan 1970), it uses date to display a date in GMT but only after adding the offset seconds. It concatenates the result with the appropriate suffix for the user's time zone.

What else can be done

I tried to pass the offset through a hidden image which is actually a PHP script that sets the session variable but I didn't succeed by doing this.

If you think there's a better way to do it don't hesitate to contact me.

Update (23 Oct 2006): As Carl Henderson mentioned using AJAX instead of modifying all links on the page is a better and more robust solution (it will work fine after a form submit for example).

Related Links

• Download the code