Customizable Multilingual Digital Clock Plugin - jqClock.js

Customizable Multilingual Digital Clock Plugin - jqClock.js
File Size: 29.8 KB
Views Total: 468
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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 and done.

$("#example").clock();

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. API methods.

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

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

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

Changelog:

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.