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:

• 10 Best Countdown jQuery Plugins
• 5 Best Countdown Timer JavaScript Libraries

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="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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">
</div>

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">
</div>

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
myTimer.start();

// stops the countdown timer
myTimer.stop();

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"
     data-label-days="Days"
     data-label-hours="Hours"
     data-label-minutes="Minutes"
     data-label-seconds="Seconds"
></div>

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