There are few ways to get started, from the most simple example to advanced, we support many different countdown styles, see wich one fits your scenario, and if any doesn’t the Docs are a good starting point to customize your output.
Advanced coupon site
This example handle multiple cases of the countdown, show %-w
weeks and %-d
days only when necessary and handle pluralization, display the time as %H:%M:%S
.
Basic coupon site
This is the most common case to use the script, that mimic the countdown style in coupon sites like Groupon. Format the output with %D days %H:%M:%S
.
Bootstrap
Showcases the use of the plugin within Bootstrap library, integrating together with others javascript components as well the css template.
Continue after finish
Configure countdown to continue after reaches its end, then the timer will start to counting up and will never stop until said so.
Legacy style
Assign the callback uppon initialization, format the countdown %w
weeks %d
days %H
hours %M
minutes %S
seconds where each directive value is displayed within his own DOM element (<span>
) and all are zero-padded.
Months and weeks offsets
Display the possibles days offsets %n
, %d
and %D
regarging the months, weeks and the total amount of the days until the finish date.
Multiple instances on the same page
Assign the countdown on several elements at the same time.
Sum of total hours remaining
Display a countdown calculating all remaining hours to the final date.
Timezone Aware
Use MomentJS to display a countdown accordingly to the selected timezone no matter the localtime your computer is.
Callback style and formatter modifiers
Very similar to the legacy example, but uses the callback style instead. Format the output with blank-padded value for weeks (%-w
) and days (%-d
) and pluralize it’s output with %!w
and %!d
.