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.