Countdown From A Date To Another Date - jQuery PsgTimer

File Size: 7.7 KB
Views Total: 4094
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Countdown From A Date To Another Date - jQuery PsgTimer

PsgTimer is an easy, modern, cross-browser countdown timer plugin for creating a digital clock that counts down from a date to another date you provide.

See also:

How to use it:

1. To get started, include the jQuery PsdTimer plugin and other required resources on the web page.

<link rel="stylesheet" href="css/psgTimer.css">
<script src=""
<script src="js/jquery.psgTimer.js"></script>

2. Create a placeholder element for the countdown timer and specify the end time in the data-timer-end attribute:

<div id="demo" 
     data-timer-end="24.12.2019 23:59 UTC-04:45">

3. Call the plugin to the placeholder element. Done.

var myTimer = new PsgTimer('#demo');

4. You can also specify the end time in the JavaScript during init.

<div id="demo">
var myTimer = new PsgTimer('#demo',{
    endDateTime: Date.UTC(2019, 12, 24, 0, 0, 0),

5. Stop/stop the countdown timer manually.

// starts the countdown timer

// stops the countdown timer

6. Specify the start date. Default: current local time.

var myTimer = new PsgTimer('#demo',{
    currentDateTime: Date.UTC(2018, 12, 24, 0, 0, 0),

7. Enable the tick animation. Default: false.

var myTimer = new PsgTimer('#demo',{
    animation: 'fade'

8. Decide whether to display the days, hours, minutes, and seconds in different slots. Default: false.

var myTimer = new PsgTimer('#demo',{
    multilpeBlocks: true

9. Localize the countdown timer.

<div id="psgTimer"
// or
var myTimer = new PsgTimer('#demo',{
    labels: {
      days: 'Days',
      hours: 'Hours',
      minutes: 'minutes',
      seconds: 'seconds'

10. Callback functions available.

var myTimer = new PsgTimer('#demo',{
    onInit: function () {
    onStart: function () {
    onStop: function () {
    onEnd: function () {
    onChangeStart: function () {
    onChangeEnd: function () {

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