Countdown

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

jQuery Countdown documentation

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

Years Months Days Hours Minutes Seconds
                    
                      <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

JavaScript behavior

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.

Parameters Description Default value

startDate

Date from which the time period will be calculated null

endDate

A required parameter that tells the plugin the date by which a countdown is required null

yearsFormat

Display format for years %Y

monthsFormat

Display format for months %M

daysFormat

Display format for days %D

hoursFormat

Display format for hours %H

minutesFormat

Display format for minutes %M

secondsFormat

Display format for seconds %S

yearsElSelector

Selector, which is responsible for the output of the years in the initialized object '.js-cd-years'

monthsElSelector

Selector, which is responsible for displaying months in the initialized object '.js-cd-months'

daysElSelector

Selector that is responsible for displaying days in the initialized object '.js-cd-days'

hoursElSelector

Selector that is responsible for displaying hours in the initialized object '.js-cd-hours'

minutesElSelector

Selector that is responsible for displaying minutes in the initialized object '.js-cd-minutes'

secondsElSelector

Selector that is responsible for displaying seconds in the initialized object '.js-cd-seconds'

circles

If true, initializes the element with the circles plugin (https://www.lugolabs.com/circles) false

fgColor

If circles is true, sets the fill color of SVG circles '#000000'

bgColor

If circles is true, sets the line color of SVG circles '#cccccc'

additionalText

If circles is true, then adds a postfix to the numerical value null

fontSize

If circles is true, then sets the font size inside SVG circles 16

radius

The radius of the circles 80

value

Init value of the circle (optional, defaults to 0) 0

maxValue

Maximum value of the circle (optional, defaults to 100) 100

width

The width of the ring (optional, has value 10, if not specified) 10

duration

Value in ms of animation's duration; defaults to 500; if 0 or null is passed, the animation will not run 0