jClocksGMT.js 2.0

jClocksGMT.js 2.0

jQuery based analog and digital world clock(s).

Check it out on github.

What is jClocksGMT?

jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Perfect for world clocks. Now supporting automatic daylight saving time conversions for affected timezones. Requires jQuery Rotate plugin. [bananas]

Demo

Features

  • Analog Clock
  • Digital Clock
  • Date Display
  • 5 Clock Skins
  • jQuery Rotate
  • Custom Time Formats
  • Custom Date Formats
  • GMT Timezone Offsets
  • Automatic Daylight Saving Time conversion on affected timezones.
  • Easy CSS customization
  • Easy image customization
  • [bananas][bananas][bananas]

Compatibility

Chrome, Safari, Firefox, Opera, IE7+, IOS4+, Android, windows phone.

Usage

Javascript

Include jquery and the jClocksGMT script in your head tags or right before your body closing tag.

CSS

Include the jClocksGMT CSS style in your head tags.

HTML

Use the following markup for your clock.

Fire the plugin

Bind the jClocksGMT behaviour on every link with any id or class.

Documentation

Default options:

Common offsets by time zone:

(only use the number after GMT: GMT-2 = offset: ‘-2’ Daylight Saving Time converted automatically)

GMT-12 Eniwetok
GMT-11 Samoa
GMT-10 Hawaii
GMT-9 Alaska
GMT-8 PST, Pacific US
GMT-7 MST, Mountain US
GMT-6 CST, Central US
GMT-5 EST, Eastern US
GMT-4 Atlantic, Canada
GMT-3 Brazilia, Buenos Aries
GMT-2 Mid-Atlantic
GMT-1 Cape Verdes
GMT 0 Greenwich Mean Time
GMT+1 Berlin, Rome
GMT+2 Israel, Cairo
GMT+3 Moscow, Kuwait
GMT+4 Abu Dhabi, Muscat
GMT+5 Islamabad, Karachi
GMT+6 Almaty, Dhaka
GMT+7 Bangkok, Jakarta
GMT+8 Hong Kong, Beijing
GMT+9 Tokyo, Osaka
GMT+10 Sydney, Melbourne, Guam
GMT+11 Magadan, Soloman Is.
GMT+12 Fiji, Wellington, Auckland

To find specific GMT offsets,
goto: http://www.timeanddate.com/time/zone/
search: location
use: Current Offset
if location is currently observing DST, add 1 to offset

Time Formatting:
Format Output Meaning
HH 19 24-hour format of hour with leading zero (two digits long).
hh 07 12-hour format of hour with leading zero (two digits long).
H 19 24-hour format of hour without leading zeros.
h 7 12-hour format of hour without leading zeros.
mm 01 Minutes with the leading zero (two digits long).
m 1 Minutes without the leading zero.
ss 08 Seconds with the leading zero (two digits long).
s 8 Seconds without the leading zero.
a pm Lowercase am or pm.
A PM Uppercase AM or PM.
SSS 095 Milliseconds with leading zeros (three digits long).
S 95 Milliseconds without leading zeros.
Z -0500 Difference to Greenwich time (GMT) in hours.
'NO ''FORMAT'' HERE' NO 'FORMAT' HERE The specified string within the single quotes printed literally. To escape a single quote, you must prepend it with another single quote.
Date Used:  Sunday April 3, 2016 19:01:08.095 GMT-0500 (CDT)
Date Formatting:
Format Output Meaning
YYYY 2016 Four-digit representation of the year.
YY 16 Two-digit representation of the year.
MMMM April Full textual representation of the month.
MMM Apr Three letter representation of the month.
MM 04 Month with the leading zero (two digits long).
M 4 Month without the leading zero.
DDDD Sunday Full textual representation of the day of the week.
DDD Sun Three letter representation of the day of the week.
DD 03 Day of the month with leading zero (two digits long).
D 3 Day of the month without leading zeros.
'NO ''FORMAT'' HERE' NO 'FORMAT' HERE The specified string within the single quotes printed literally. To escape a single quote, you must prepend it with another single quote.
Date Used:  Sunday April 3, 2016 19:01:08.095 GMT-0500 (CDT)

Creator

Richard McMaster

License

jClocksGMT is available under the MIT license.

Download

Featured on



Join the Conversation

Loading Facebook Comments ...

14 thoughts on “jClocksGMT.js 2.0

  1. Haret

    Hey Richard! Thank you for this awesome plugin! I really appreciate your work and effort :D.

    I have a small question. How can I use the plugin by displaying only the time (the written text) without the graphic of the ticking clock?

    Many thanks!

    1. kingkodekingkode Post author

      Hello Haret!
      I am pleased that you enjoy the plugin!

      If you set the analog parameter to false during initialization, that will remove the graphic clock.

  2. Adi

    Hi,
    First of all – Thanks a lot! This is a great plugin and I appreciate the time and effort you put into this without asking anything in return.
    Now down to business…
    Here’s your code for checking daylight saving time:
    code:
    // check if daylight saving time is in effect
    Date.prototype.stdTimezoneOffset = function() {
    var jan = new Date(this.getFullYear(), 0, 1);
    var janUTC = jan.getTime() + (jan.getTimezoneOffset() * 60000);
    var janOffset = new Date(janUTC + (3600000 * options.offset));
    var jul = new Date(this.getFullYear(), 6, 1);
    var julUTC = jul.getTime() + (jul.getTimezoneOffset() * 60000);
    var julOffset = new Date(julUTC + (3600000 * options.offset));
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
    //return Math.max(janOffset, julOffset);
    }
    Date.prototype.dst = function() {
    if( parseFloat(options.offset) < = -4 && parseFloat(options.offset) >= -10 ) {
    var dCheck = new Date;
    var utcCheck = dCheck.getTime() + (dCheck.getTimezoneOffset() * 60000);
    var newCheck = new Date(utcCheck + (3600000 * options.offset));
    return this.getTimezoneOffset() < this.stdTimezoneOffset(); //return newCheck.getTimezoneOffset() < this.stdTimezoneOffset(); } It doesn't work for me (GMT+2 Jerusalem). The daylight saving time is in effect, however I need to manually set the GMT to +3 in order for this to show me the correct time. Do you know what could be the reason for this and how can it be fixed? I'm not entirely sure I understand your solution (in code above). Could you briefly explain? Regards, Adi.

  3. MK

    Hi,

    I am playing with this clock. Brilliant so far, but it failed to adjust time to daylight saving – just 2 days ago it should move 1 hour back. It didn’t. Any ideas ? Yes, some of my zones are affected (+1 should be for sure):

    $(‘#clock_ie’).jClocksGMT({ offset: ‘+1’, digital: true });
    $(‘#clock_ca’).jClocksGMT({ offset: ‘-8’, digital: true });
    $(‘#clock_tw’).jClocksGMT({ offset: ‘+8’, digital: true });

    1. MK

      Also, please note that some zones change time on different date. For example, whole world changed time 2 days ago, but not California – they will change probably in 1 week.

    1. Richard

      Hi Jayaraj,

      To display a clock with France’s time, use the following markup:

      And initialize with these parameters:

Leave a Reply

Your email address will not be published. Required fields are marked *

eleven − three =