Customizable Multilingual Digital Clock Plugin - jqClock.js

File Size: 47.6 KB
Views Total: 1091
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.

    // 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.

  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".

  "langSet": "fr"
=> mardi, 16 mars 2021

7. Customize the timestamp. 

var customtimestamp = new Date();
customtimestamp = customtimestamp.getTime();
customtimestamp = customtimestamp+1123200000+10800000+14000;
  "timestamp": customtimestamp,
  "langSet": "ru"

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

  "calendar": false

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

  "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.

  "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

  "timezone": "UTC-9"

12. API methods.

// start

// stop

// destroy



  • 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.