Countdown

A simple and HTML agnostic date countdown plugin with different countdown options.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/jquery.countdown.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/hs.countdown.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of countdowns
    $('.js-countdown').each(function () {
      var countdown = $.HSCore.components.HSCountdown.init($(this));
    });
  });
</script>

Basic example

<div class="js-countdown"
        data-hs-countdown-options='{
         "endDate": "2021/12/30"
       }'>
  <span class="js-cd-years h3"></span>
  <span>Years</span>
  <span class="js-cd-months h3"></span>
  <span>Months</span>
  <span class="js-cd-days h3"></span>
  <span>Days</span>
  <span class="js-cd-hours h3"></span>
  <span>Hours</span>
  <span class="js-cd-minutes h3"></span>
  <span>Minutes</span>
  <span class="js-cd-seconds h3"></span>
  <span>Seconds</span>
</div>

Target date

The target date that you are seeking to countdown. This argument can be one of the following:

• A native date object
• The milliseconds from Epoch time
• String formatted as following:
  1. YYYY/MM/DD
  2. MM/DD/YYYY
  3. YYYY/MM/DD hh:mm:ss
  4. MM/DD/YYYY hh:mm:ss

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of countdowns
    $('.js-countdown').each(function () {
      var countdown = $.HSCore.components.HSCountdown.init($(this));

      countdown.on('update.countdown', function() {
        console.log('Updated!');
      });
    });
  });
</script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-countdown-options='{
   ...

   // Custom
   "endDate": "2020/11/30",
   "yearsFormat": "%Y",
   "monthsFormat": "%M",
   "daysFormat": "%D",
   "hoursFormat": "%H",
   "minutesFormat": "%M",
   "secondsFormat": "%S",
   "yearsElSelector": ".js-cd-years",
   "monthsElSelector": ".js-cd-months",
   "daysElSelector": ".js-cd-days",
   "hoursElSelector": ".js-cd-hours",
   "minutesElSelector": ".js-cd-minutes",
   "secondsElSelector": ".js-cd-seconds",
   "circles": false,
   "fgColor": "#000000",
   "bgColor": "#cccccc",
   "additionalText": null,
   "fontSize": 16
}' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-countdown-options='{}'. For more detailed or missing attributes/functions, see the official jQuery Countdown documentation documentation page.