Visitor's Time Zone Translated to Your Office Time

Our community is world wide.

Our very first customer for off-the-shelf software was from Wausau, Wisconsin, USA. And our very first customer for custom software was from Adelaide, South Australia, Australia.

Ever since, during the ensuing 26 years, our customers have been from practically all over the world.

How about you and your customers? Or your site visitors?

Some website visitors peruse your pages while you're sleeping. It might be noon for them and 3 o'clock in the morning for you.

They may wish to call or send a text message and wonder what would be a good time. Or plan to ask a questions via your contact form and wonder if you are your desk.

To eliminate wondering related to time differences, put certain JavaScript into your contact web page; like we have on ours.

The JavaScript translates the time in the visitor's time zone to the time at your office.

Using the website visitor's computer to determine their time and time zone used to be iffy. Clocks were manually set, sometimes incorrectly.

It's unlikely a computer clock is inadvertently wrong anymore — a click syncs the computer/device clock with the world clock. The clocks of computers and mobile devices tend to be set correctly when purchased and the user doesn't need to futz with it at all.

Therefore, nowadays, the clock of the users computer or device is much more reliable than previously. But still, please note, it's not 100% certain that all your site visitor's clocks will be correct.

Notes About How It's Done

Consulting the clock is done via the browser with JavaScript. The visitor's time, date, and time zone are obtained.

Using the obtained information, JavaScript calculations determine your current office time.

Here's an example:

Our office is in the same time zone as Chicago, USA, Central Time Zone.

The JavaScript has a number of ways to format how the time is published. As examples, the time can be 24-hour or 12-hour and the month name or number can be published, as can the entire date.

(Because there will sometimes be a date difference between the two time zones, it may be prudent to eliminate confusion by publishing at least the day of the week or the day of the month.)

The time zone calculation JavaScript is about 70 lines. With it on the page, properly customized and installed, the following 2 lines will publish

1. the visitor's current time and
2. the visitor's time translated to your current office time, respectively.

<script>document.write(VisitorTime)</script>

<script>document.write(OfficeTime)</script>

But first, the time zone calculation JavaScript needs to be customized and pasted into your web page.

Customizing the Time Zone Calculation JavaScript

Here's the JavaScript. Customization notes follow.

<script>
/* 
   Visitor's Time Zone Translated to Your Office Time
   Version 1.0
   August 1, 2016

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2016 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

/* Customization section. */

var OfficeTimeOffset = 300; // Is likely to change when Daylight Savings Time/Summer Time changes.
var TimeTemplate = "{DOWNAME} (day-of-week # {DOW}), {MONTHNAME} (month # {MONTH}) {DAY}, {YEAR} at {HOUR}:{MINUTE}:{SECOND} {APM}";
var DayOfWeekNames = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var MonthNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

/* End customization section. */
var visitortime = new Date();
var ComputerTimezoneOffset = visitortime.getTimezoneOffset();
var Difference = ComputerTimezoneOffset - OfficeTimeOffset;
var officetime = new Date();
officetime.setTime(visitortime.getTime() + (Difference * 60000));
var VisitorTime = FormatDateTime(visitortime);
var OfficeTime = FormatDateTime(officetime);
function FormatDateTime(tm)
{
   var s = TimeTemplate;
   if( s.indexOf("{DOW}")>=0 ) { s = s.replace(/\{DOW\}/g,(tm.getDay()+1)); }
   if( s.indexOf("{DOWNAME}")>=0 ) { s = s.replace(/\{DOWNAME\}/g,DayOfWeekNames[tm.getDay()]); }
   if( s.indexOf("{MONTH}")>=0 ) { s = s.replace(/\{MONTH\}/g,(tm.getMonth()+1)); }
   if( s.indexOf("{MONTHNAME}")>=0 ) { s = s.replace(/\{MONTHNAME\}/g,MonthNames[tm.getMonth()]); }
   if( s.indexOf("{DAY}")>=0 ) { s = s.replace(/\{DAY\}/g,tm.getDate()); }
   var year = tm.getYear();
   if( year < 1900 ) { year += 1900; }
   if( s.indexOf("{YEAR}")>=0 ) { s = s.replace(/\{YEAR\}/g,year); }
   var hour = tm.getHours();
   var pm = (hour > 11) ? true : false;
   var pmhour = (hour > 12) ? (hour - 12) : hour;
   if( s.indexOf("{HOUR}")>=0 || s.match(/\{apm\}/i) )
   {
      var nowhour = hour;
      if( s.match(/\{apm\}/i) )
      {
         if(pm) { nowhour = pmhour; }
         var apm = (s.indexOf("{APM}")>=0) ? ( pm ? 'PM' : 'AM' ) : ( pm ? 'pm' : 'am' );
         s = s.replace(/\{apm\}/ig,apm);
      }
      if( s.indexOf("{HOUR}")>=0 ) { s = s.replace(/\{HOUR\}/g,nowhour); }
   }
   var min = tm.getMinutes();
   if( min < 10 ) { min = "0"+min; }
   if( s.indexOf("{MINUTE}")>=0 ) { s = s.replace(/\{MINUTE\}/g,min); }
   var sec = tm.getSeconds();
   if( sec < 10 ) { sec = "0"+sec; }
   if( s.indexOf("{SECOND}")>=0 ) { s = s.replace(/\{SECOND\}/g,sec); }
   return s;
}
</script>

Customization notes:

The above time zone calculation JavaScript has 4 variables that may be customized. The first line has a value colored blue. The second has a value colored red. The last 2 of the 4 customization lines have no color changes.

1. The OfficeTimeOffset variable has a 300 value. (The number 300 is the time zone offset for us, the publishers of willmaster.com.)

   If your office is not in the same time zone as Chicago, USA, you'll need to change that number for your own time zone.

   Here is your local time offset number, assuming you're using a computer at your office with the correct time and time zone settings:

   Your local time offset is:

   The number in that box might be a negative number depending on your time zone. Whether positive or negative, copy that number and replace the 300 value in the source code.

   Important note: That number is likely to change when the time changes with Daylight Savings Time or Summer Time or whatever your local name is for seasonal time change (assuming your geographical area implements seasonal time changes).

   When a seasonal time change occurs, come back to this page and get the new number from the above box. Or, create a web page of your own to provide the number. Here's the code for that:

   <script>
   localtime = new Date();
   document.write(localtime.getTimezoneOffset());
   </script>
   

2. The TimeTemplate variable has a {DOWNAME} (day-of-week # {DOW}), {MONTHNAME} (month # {MONTH}) {DAY}, {YEAR} at {HOUR}:{MINUTE}:{SECOND} {APM} value.

   You'll likely want to change that value. It tells the JavaScript how to format the time when it's published on your web page.

   The words between curly braces are placeholders for time information:

   {PLACEHOLDER}	The data it publishes
   {DOW}	The number of the calendar day of the week. Sunday is number 1 and Saturday is number 7.
   {DOWNAME}	The name of the calendar day of the week.
   {MONTH}	The number of the calendar month. January is number 1 and December is number 12.
   {MONTHNAME}	The name of the calendar month.
   {DAY}	The day of the calendar month.
   {YEAR}	The calendar year.
   {HOUR}	The hour.
   {MINUTE}	The minute.
   {SECOND}	The second.
   {APM}	Signals a 12-hour clock and publishes either "AM" or "PM".
   {apm}	Signals a 12-hour clock and publishes either "am" or "pm".

3. The DayOfWeekNames variable contains an array of names for the days of the week. Change the names if your language is other than English or you wish to publish abbreviations. (If you use the {DOWNAME} placeholder in the value for the TimeTemplate variable, the relevant day-of-week name in this array is used to replace the {DOWNAME} placeholder.)

4. The MonthNames variable contains an array of names for the months of the year. Change the names if your language is other than English or you wish to publish abbreviations. (If you use the {MONTHNAME} placeholder in the value for the TimeTemplate variable, the relevant month name in this array is used to replace the {MONTHNAME} placeholder.)

No other customization is required.

Installing the Time Zone Calculation JavaScript

The time zone calculation JavaScript needs to be in the source code of the web page (or imported from an external file) somewhere above the location where the time will be published. It may be in the HEAD area of the web page or in the BODY, so long as it's above where it will be referred to.

To publish the time on your web page, use one or both of these lines where the time will be published. (Example further below.)

<script>document.write(VisitorTime)</script>
<script>document.write(OfficeTime)</script>

The first line publishes the site visitor's local time. The second line publishes your current office time as calculated from your site visitor's time zone.

Here's an example using the above two lines:

<p>
Your time: <span class="nowrap"><script>document.write(VisitorTime)</script></span>
</p>
<p>
Our office time, translated from your time zone: <span class="nowrap"><script>document.write(OfficeTime)</script></span>
</p>

To test, change the time zone on your computer or device clock and load your page to see what it would look like for someone in that time zone. Verify the time is correctly translated to your office time. (Don't forget to change your clock's time zone back to where it belongs!)

As a testing alternative, ask people in different time zones to try it for you.

Now, site visitors in any time zone can have their time translated to your current office time.

(This article first appeared in Possibilities ezine.)

Will Bontrager