Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Miscellaneous

TimeZone Corrector

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

TimeZone Corrector - CodeCanyon Item for Sale


Ad: Bluehost hosting

TimeZone Corrector is a JavaScript tool which corrects time and dates in website content.

Most of the websites in Internet are international and often these websites publish dates which are corresponding to their local timezone. Most of the times it’s really hard for visitors from different timezones to catch up with the time difference and here comes the TimeZone Corrector.

With this tool the visitors will be able to see the correct time and date in their timezone only by hovering over the time and date.

Demo of the plugin

Supported formats:

  • (H|G):i
  • (h|g):i (a|A)
  • (H|G):i (m|n).(d|j).Y
  • (h|g):i(a|A) (d|j).(m|n).Y
  • (d|j).(m|n).Y (H|G):i:s
  • (m|n).(d|j).Y (h|g):i:s (a|A)

Examples of these formats:

  • 14:23
  • 7:32 pm
  • 17:29 3.25.2013
  • 4:53am 25.03.2011
  • 15.11.2013 19:23:44
  • 07.29.1990 01:55:23 am

* the date and time formats are according to PHP date() function

What it has?

  • The script is not dependant of any framework (jQuery/Prototype/etc).
  • It can be used unlimited times on a page. It is organized as JavaScript Class.
  • It has two neutral themes and unlimited number of themes can be build with CSS.
  • It is signular file. The CSS is appended to the head of the document on run time.
  • It is only 5KB minified and 9KB not minified.
  • It is cross-browser compatible. It works on IE6+, Firefox, Chrome, Safari, Opera.

How to use it?

  1. First you have to include the script in the document:
    <script type="text/javascript" src="tzc/tzc.min.js"></script>
  2. Then you should initialize the class by using this script:

    var myTZC = new TimeZoneCorrector('tzcselector');

    The first parameter is the selector of the HTML element. For ID the selector must be #elemendit or elementid. For class it must be .classname (like css). You can also use element object directly.

    The second parameter is (optional) object with options for TimeZone Corrector. Please check all the available options from the table below.


    ID selector

    var myTZC = new TimeZoneCorrector('tzcselector');

    ID selector

    var myTZC = new TimeZoneCorrector('#tzcselector');

    Class selector

    var myTZC = new TimeZoneCorrector('.tzcselector');

    Direct object selector

    var myTZC = new TimeZoneCorrector(document.getElementById('tzcselector'));

    Selecting with jQuery

    var myTZC = new TimeZoneCorrector($('.tzcselector'));

    Note: TimeZoneCorrector() class is the same as TZC so use the one you prefer.


 phpfile (string) the path to the tzc.php file. It can be relative or absolute path cookieName (string) the name of the cookie which tzc.php file creates labelText (string) the text which is before the corrected time in the tooltip theme (string) the theme name. Default: [dark]. Possible options: [dark, light] 

Example of using all options:

<div id="mycontent"> My long content... with dates like this 16:30 03.10.2013... etc </div> <script type="text/javascript"> var myTZC = new TZC('mycontent', { labelText : 'In your timezone:', phpfile : 'tzc/tzc.php', cookieName : 'tzc', theme : 'dark' }); </script>

Timezone settings

How to change the default timezone of your website?

Often your website is hosted in different timezone than yours. In order to correct this you should open file tzc.php in the tzc folder.

In this file you have the following settings:

 $timezone = 'America/New_York'; // The timezone $cookieName = 'tzc'; // The cookie name $cookieExpiration = 2; // The cookie expiration time in hours

In order to change the default timezone of your website you should first find the correct timezone name at

Then change the value of the variable $timezone to your selected one.

The other two settings are related to the cookie which the script creates. If you want to change the name of the cookie you can do it by changing the value of the $cookieName variable. If you change the name of the cookie you should set the new name with cookieName option when initializing the TZC script.

Also the cookie expiration time can be changed by $cookieExpiration variable. The value for this variable is in hours.


  • v 1.2 – Fixes a little error which breaks the script sometimes

  • v 1.1 – Added support for selecting elements by class and by providing element object to the class


    Selecting by class 15:23 adipiscing elit. Nam vel risus 10:57 am nunc.

    Selecting by class 16:23 adipiscing elit. Nam vel risus 9:57 am nunc.

    Selecting by DOM object 18:23 adipiscing elit. Nam vel risus 02:57 am nunc.


    <p class="tzcClass">Selecting by class 15:23 adipiscing elit. Nam vel risus 10:57 am nunc.</p> <p class="tzcClass">Selecting by class 16:23 adipiscing elit. Nam vel risus 9:57 am nunc.</p> <p id="tzcObject">Selecting by DOM object 18:23 adipiscing elit. Nam vel risus 02:57 am nunc.</p>

    <script type="text/javascript"> var classTZC = new TimeZoneCorrector('.tzcClass'); var elObjTZC = new TimeZoneCorrector(document.getElementById('tzcObject')); </script>

  • v 1.0 – Initial version

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


1 July 13

Last Update:
8 February 15

High Resolution:

Compatible Browsers:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, PHP


eCommerce, eCommerce, All Items, correction, corrector, date, geolocation, in my time, time, timezone, world clock