Countdown

How to use?

To add hs.countdown.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin, set the time data-end-date="" and data-*-format="".

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/helpers/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
                  var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
                    yearsElSelector: '.js-cd-years',
                    monthsElSelector: '.js-cd-months',
                    daysElSelector: '.js-cd-days',
                    hoursElSelector: '.js-cd-hours',
                    minutesElSelector: '.js-cd-minutes',
                    secondsElSelector: '.js-cd-seconds'
                  });
                });
              </script>
            
          

Basic example

                  
                    <div class="js-countdown"
                            data-end-date="2020/11/30"
                            data-years-format="%Y"
                            data-months-format="%M"
                            data-days-format="%D"
                            data-hours-format="%H"
                            data-minutes-format="%M"
                            data-seconds-format="%S">
                      <strong class="js-cd-years"></strong>
                      <span>Years</span>
                      <strong class="js-cd-months"></strong>
                      <span>Months</span>
                      <strong class="js-cd-days"></strong>
                      <span>Days</span>
                      <strong class="js-cd-hours"></strong>
                      <span>Hours</span>
                      <strong class="js-cd-minutes"></strong>
                      <span>Minutes</span>
                      <strong class="js-cd-seconds"></strong>
                      <span>Seconds</span>
                    </div>
                  
                

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-start-date="".