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.

$('#clock_hou').jClocksGMT({ title: 'Houston, TX, USA', offset: '-6', skin: 2 });

Documentation

Default options:

title: 'Greenwich, England', // String: Title of location (defaults to Greenwich, England) offset: '0', // String: Set Standard GMT offset (+5.5, -4, 0, etc) (do not consider daylight savings time) dst: true, // Boolean: Does the location observe daylight savings time (set FALSE if location does not need to observe dst) digital: true, // Boolean: Display digital clock analog: true, // Boolean: Display analog clock timeformat: 'hh:mm A', // String: Time format (see below for formatting options) date: false, // Boolean: Display date dateformat: 'MM/DD/YYYY', // String: Date format (see below for formatting options) angleSec: 0, // Integer: Starting angle of second hand angleMin: 0, // Integer: Starting angle of minute hand angleHour: 0, // Integer: Starting angle of hour hand skin: 1 // Integer: Set 1 of 4 included skins for the analog clock

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