jQuery based analog and digital world clock(s).
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
Hi, Thanks for this wonderful plugin.
I have a query on changing the clock skin based on time like below:
1. White color clock during morning hours 12:00 AM – 11:59 AM (Skin-3)
2. Gray color clock during afternoon hours 12:00PM – 6:00 PM (Skin-4)
3. Dark color clock skin for morning hours 7:00 PM – 11:59 PM (Skin-5)
Please suggest to me how to get this dynamically.
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!
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.
$('#clock').jClocksGMT({ offset: ‘-5’, digital: true, analog: false });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.
in clock time taking as system time but i want put default time set
Hi,
I’m using ur clock script, but problem is the india time not showing correctly. it showing 30 sec ahed
you can check bellow link for correct time of New Delhi / Kolatta.
http://www.timeanddate.com/time/zone/india/kolkata.
pls update the script
hi
thanks for your amazing clock.
can i use it in my websites?
Yes. Yes, you can.
Thanks for this Richard! Is there a simple way to put dates under the clocks? In this format? MM/DD/YYYY
Did you ever figure this out?
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 });
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.
Hi
It is not showing hour, minute and second hand in IE8+
Can you please take a look?
Thank You
Vinodh.R
Hi
How can I create an Analog clock that shows France time with this codes?
Thanks in advance
Regards
Jayaraj
Hi Jayaraj,
To display a clock with France’s time, use the following markup:
And initialize with these parameters:
$('#clock_fr').jClocksGMT({offset: '+1', digital: false});