Customizable Multilingual Digital Clock Plugin - jqClock.js

jqClock.js is a customizable, multilingual digital clock jQuery plugin to display the current local or server time in an elegant way.

More Features:

• Custom PHP style date & time format.
• Supports custom timestamp generated from server or NLP.
• Custom timezone.
• Easy to style using your own CSS.
• Custom update speed.

See Also:

• 10 Best Analog Clocks In JavaScript

How to use it:

1. Load the jqClock.min.js library after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jqClock.min.js"></script>

2. Create an empty DIV element to hold the clock.

<div id="example" class="jqclock"></div>

3. Initialize the clock plugin on document read.

$(document).ready(function(){
  $("#example").clock({
    // options here
  });
});

4. The example CSS styles for the clock.

.jqclock {
  /* styles here */
}

.clockdate {
  /* styles here */
}

.clocktime {
  /* styles here */
}

5. Customize the format for the date and time. See PHP Datetime Format for details.

$("#example").clock({
  dateFormat: "l, F j, Y",
  timeFormat: "h:i:s A",
});

6. The plugin uses the Intl.DateTimeFormat object for the translations of the days of the week and months of the year. Defaults to "en", possible values are: "am", "ar", "bn", "bg", "ca", "zh", "hr", "cs", "da", "nl", "en", "et", "fi", "fr", "de", "el", "gu", "hi", "hu", "id", "it", "ja", "kn", "ko", "lv", "lt", "ms", "ml", "mr", "mo", "ps", "fa", "pl", "pt", "ro", "ru", "sr", "sk", "sl", "es", "sw", "sv", "ta", "te", "th", "tr", "uk", "vi".

$("#example").clock({
  "langSet": "fr"
});
=> mardi, 16 mars 2021

7. Customize the timestamp. 

var customtimestamp = new Date();
customtimestamp = customtimestamp.getTime();
customtimestamp = customtimestamp+1123200000+10800000+14000;
$("#example").clock({
  "timestamp": customtimestamp,
  "langSet": "ru"
});

8. Determine whether to show the calendar. Default: true.

$("#example").clock({
  "calendar": false
});

9. Define the rate at which the clock will update, in milliseconds.

$("#example").clock({
  "rate": 50
});

10. When a client side timestamp is used, whether DST is active will be automatically determined. However this cannot be determined for a server-side timestamp which must be passed in as UTC, in that can case it can be set with this option.

$("#example").clock({
  "isDST": false
});

11. Set the timezone. Defaults to detection of client timezone, but can be passed in as a string such as "UTC-9" when using server generated timestamps

$("#example").clock({
  "timezone": "UTC-9"
});

12. API methods.

// start
$("#example").clock('start');

// stop
$("#example").clock('stop');

// destroy
$("#example").clock('destroy');

Changelog:

2024-03-18

• prevent error when using T format char w/local time

v2.3.7 (2024-03-11)

• Update

v2.3.6 (2021-12-12)

• performance.timing.navigationStart has been deprecrated in favor of performance.timeOrigin
• optimize code to avoid redundancies, favor readability, using Codefactor as a reference for code quality
• prefer ES6 style arrow function expressions to traditional functions

---

This awesome jQuery plugin is developed by JohnRDOrazio. For more Advanced Usages, please check the demo page or visit the official website.