Minimal jQuery Any Date Countdown Timer Plugin - countdown

Yet another jQuery countdown plugin that displays how many years, days, hours, minutes, and seconds left from a given date/time, with callback and time offset support. Fully styleable via CSS.

How to use it:

1. Include the latest version of jQuery JavaScript library and the jQuery countdown plugin into your Html page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

2. Create an div element and use data-date attribute to set the particular date you wish to count down from. You can also set the date using date option during initialization.

<div class="countdown" data-date="December 24, 2025 00:0:01"></div>

3. Call the plugin to initialize the countdown timer.

$('.countdown').countdown();

4. By default, This plugin output remaining time as shown below.

<div class="countdown">11 years, 69 days, 16 hours, 52 min and 15 sec</div>

5. Default settings

// The end time of your fancy countdown. 
// Accpets either a date object or a string/integer
date: "June 7, 2087 15:03:25",

// Refresh rate in milliseconds or false to avoid automatic updates.
refresh: 1000,

// A period of time (in milliseconds) that is used as offset in time difference calculation between now and end time. 
offset: 0,

// Called when the end date is reached
onEnd: function() {
  return;
},

// Custom Html template for output
render: function (date) {
  this.el.innerHTML = date.years + " years, " +
  date.days+ " days, " +
  this.leadingZeros(date.hours) + " hours, " +
  this.leadingZeros(date.min) + " min and " +
  this.leadingZeros(date.sec) + " sec";
}

6. Public methods.

// Add leading zeros to a number.
leadingZeros()

// Update the end time.
update()

// Update the offset (time in milliseconds).
updateOffset()

// Call the render method. This might be usefull if you set refresh to false.
render()

// Stops the refresh loop.
stop()

// Start the refresh loop.
start()

// Update the options and restart the countdown
restart()

Change log:

v2.2.0 (2016-05-07)

• added restart countdown api method
• Fixed bower dependencies and main field

---

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