Customizable Multilingual Digital Clock Plugin - jqClock.js

Customizable Multilingual Digital Clock Plugin - jqClock.js
File Size: 29.5 KB
Views Total: 96
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
});

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