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="./node_modules/jquery-countdown/dist/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.