Customizable Multi-Language Plugin For Digital Clock | jqClock.js

jqClock.js is a multilingual, customizable jQuery digital clock extension for displaying local or server time in an elegant way.

Converts a specific DOM element to a jQuery clock that can take an initial timestamp (even server-generated, NTP generated) instead of client system time, supports internationalization (48 languages), PHP style format characters, and is relatively independent of the clock the system. Supports time of microseconds.

More Features:

  • PHP custom style date and time format.
  • Supports custom timestamps generated from server or NLP.
  • Custom time zone.
  • Easy to design with your own CSS.
  • Custom refresh speed.

How to make use of 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 component to hold the clock.

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

3. Initialize the clock plugin and completed it.

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

4. The instance 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 particulars.

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

6. The plugin makes use of the Intl.DateTimeFormat object for the translations of the times of the week and months of the year.

$("#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 or not to show the calendar.

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

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

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

10. When a consumer-facet timestamp is used, whether or not DST is lively can be routinely decided.

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

Customizable Multilingual Digital Clock Plugin, jQuery Clock Plugin Github


See Demo And Download

Official Website(JohnRDOrazio): Click Here

This superior jQuery/javascript plugin is developed by JohnRDOrazio. For extra Advanced Usage, please go to the official website.

Share