Countdown

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

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 Space 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>
                <strong class="js-cd-months"></strong>
                <strong class="js-cd-days"></strong>
                <strong class="js-cd-hours"></strong>
                <strong class="js-cd-minutes"></strong>
                <strong class="js-cd-seconds"></strong>
              </div>
            
          

Examples

HTML:

            
              <div class="js-countdown row"
                   data-end-date="2020/11/30"
                   data-month-format="%m"
                   data-days-format="%D"
                   data-hours-format="%H"
                   data-minutes-format="%M"
                   data-seconds-format="%S">
                <div class="col-6 col-sm-3 mb-7 mb-sm-0">
                  <span class="js-cd-days d-block display-4 text-primary font-weight-medium"></span>
                  <span class="d-block h5 font-weight-normal mb-0">Days</span>
                </div>
                <div class="col-6 col-sm-3 mb-7 mb-sm-0">
                  <span class="js-cd-hours d-block display-4 text-primary font-weight-medium"></span>
                  <span class="d-block h5 font-weight-normal mb-0">Hours</span>
                </div>
                <div class="col-6 col-sm-3">
                  <span class="js-cd-minutes d-block display-4 text-primary font-weight-medium"></span>
                  <span class="d-block h5 font-weight-normal mb-0">Mins</span>
                </div>
                <div class="col-6 col-sm-3">
                  <span class="js-cd-seconds d-block display-4 text-primary font-weight-medium"></span>
                  <span class="d-block h5 font-weight-normal mb-0">Secs</span>
                </div>
              </div>
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/jquery.countdown.min.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/helpers/hs.countdown.js"></script>

              <!-- JS Plugins Init. -->
              <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>
            
          

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="".