Countdown

You can add a Countdown Timer to any Page using the following setup:

Code Example

<div class="countdown" data-year="2020" data-month="7" data-day="15"></div>

Settings

Setting Description
data-format

Choose a Date Format for your Countdown. You can select from a List of Formats available here: http://keith-wood.name/countdown.html . Simply navigate to the Formats 1 and Formats 2 Tab.

Ex: data-format="dHMS"

data-year

Add a Countdown Year

Ex: data-year="2021"

data-month

Add a Countdown Month

Option(s): Values from 1 to 12. 1 means January and 12 means December

Ex: data-month="8"

data-day

Add a Countdown Day

Option(s): Values from 1 to 31

Ex: data-day="15"

data-hour

Add a Countdown Hour

Option(s): Values from 1 to 24

Ex: data-hour="12"

data-minute

Add a Countdown Minute

Option(s): Values from 1 to 59

Ex: data-minute="30"

data-second

Add a Countdown Second

Option(s): Values from 1 to 59

Ex: data-second="30"

data-redirect

Add a URL to redirect to once the Countdown ends

Ex: data-redirect="https://google.com"

data-since

Convert your Countdown to Countup by setting this Attribute to true. Make sure that all other Time Settings are set in the Past. Ex: data-year="2019" and data-month="4"

Option(s): true or false

Ex: data-since="true"

Translating Countdowns to a Different Language using js/plugins.min.js File

  1. Simply visit this URL: http://keith-wood.name/countdown.html#l10n.
  2. Navigate to Localisations Section to download your Language Pack. Ex: jquery.countdown-fr.js and add this File in the js/ Folder
  3. Open your HTML File which has the Countdown Codes.
  4. Find the js/plugins.min.js JS File Linking at the bottom of the Page and Paste the following code just after that Line:

    <script src="js/jquery.countdown-fr.js"></script>

Translating Countdowns to a Different Language for AJAX JS Lazy Loading

  1. Simply visit this URL: http://keith-wood.name/countdown.html#l10n.
  2. Navigate to Localisations Section to download your Language Pack. Ex: jquery.countdown-fr.js
  3. Copy the Entire Contents of the Language Package.
  4. Open the js/plugins.countdown.js File and Paste the Copied Codes just above this Line: SEMICOLON.widget.countdownInit = function( $countdownEl )

Last Modified: June 7, 2020