Countdown

A simple JavaScript plugin for producing an accurate, intuitive description of the timespan between two date instances.

Setup

In order the countdown plugin to work you must add the following scripts in your page. Make sure that all the javascript files are inserted at the end of the page so it doesn't slowdown the page's loading speed.

<script src="/assets/vendor/countdown/js/jquery.countdown.min.js"></script>
All you need to do is to replace data-countdown-date with the date you want to use. The date formate must be MM/DD/YYY.

Style 1

Example


<div class="countdown" data-countdown-date="10/30/2019" data-countdown-label="hide"></div>
You can opt to show or hide the datetime labels with the data-countdown-label="show" or data-countdown-label="hide" attribute. Add it on the countdown container.

Example


<div class="countdown" data-countdown-date="10/30/2019" data-countdown-label="show"></div>
Use .countdown-sm to decrease the countdown's size.

Example


<div class="countdown countdown-sm" data-countdown-date="10/30/2019" data-countdown-label="show"></div>

Style 2

Example


<div id="countdown" class="countdown countdown--style-1" data-countdown-date="07/10/2019" data-countdown-label="show"></div>

Style 3

Example


<div class="countdown countdown--style-1 countdown--style-1-v1" data-countdown-date="07/10/2019" data-countdown-label="show"></div>