A repository of over 1000 quality jQuery plugins

jQuery jClocksGMT.js

jClocksGMT.js is a jQuery Date & Time plugin.

Created by mcmastermind

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.

Not what you're looking for? Click here to view more Date & Time jQuery plugins

jClocksGMT 2.0

jQuery based analog and digital clock(s).

What is jClocksGMT?

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

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

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.

<script src="js/jquery.js"></script>
<script src="js/jquery.rotate.js"></script>
<script src="js/jClocksGMT.js"></script>

CSS

Include the jClocksGMT CSS style in your head tags.

<link rel="stylesheet" href="css/jClocksGMT.css">

HTML

Use the following markup for your clock.

<div id="clock_hou"></div>

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 5 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)

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

FORMATOUTPUTMEANING
HH1924-hour format of hour with leading zero (two digits long).
hh0712-hour format of hour with leading zero (two digits long).
H1924-hour format of hour without leading zeros.
h712-hour format of hour without leading zeros.
mm01Minutes with the leading zero (two digits long).
m1Minutes without the leading zero.
ss08Seconds with the leading zero (two digits long).
s8Seconds without the leading zero.
apmLowercase am or pm.
APMUppercase am or pm.
SSS095Milliseconds with leading zeros (three digits long).
S95Milliseconds without leading zeros.

Date Formatting:

FORMATOUTPUTMEANING
YYYY2016Four-digit representation of the year.
YY16Two-digit representation of the year.
MMMMAprilFull textual representation of the month.
MMMAprThree letter representation of the month.
MM04Month with the leading zero (two digits long).
M4Month without the leading zero.
DDDDFridayFull textual representation of the day of the week.
DDDFriThree letter representation of the day of the week.
DD01Day of the month with leading zero (two digits long).
D1Day of the month without leading zero.

Creator

Richard McMaster

License

jClocksGMT is available under the MIT license.



You might also like these other Date & Time jQuery Plugins

  • timedropper

    timedropper is a jQuery UI timepicker. Manage time input fields in a standard form. Focus on the input to open […]

  • bootstrap-year-calendar

    A fully customizable year calendar widget, for jQuery and bootstrap.

  • Datedropper

    datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.