Countdown

A simple and html agnostic date countdown plugin for jQuery.

Example

This example handle multiple cases of the countdown, show %-w weeks and %-d days only when necessary and handle pluralization, display the time as %D:%H:%M:%S.

Limited Time Only!

<div class="countdown-container">
    Limited Time Only!
    <span class="countdown" id="countdown1"></span>
</div>

$('#countdown1').countdown('2021/10/10 12:34:56')
    .on('update.countdown', function (event) {
        var format = '%H:%M:%S';
        if (event.offset.totalDays > 0) {
            format = '%-d day%!d ' + format;
        }
        if (event.offset.weeks > 0) {
            format = '%-w week%!w ' + format;
        }
        $(this).html(event.strftime(''
        +'<div class="countdown-block-container">'+
            '<div class="countdown-block">'+
                '<h1 class="clock-val">%d</h1>'+
            '</div>'+
            '<h4 class="clock-text"> Days </h4>'+
        '</div>'+
        '<div class="countdown-block-container">'+
            '<div class="countdown-block">'+
                '<h1 class="clock-val">%H</h1>'+
            '</div>'+
            '<h4 class="clock-text"> Hours </h4>'+
        '</div>'+
        '<div class="countdown-block-container">'+
            '<div class="countdown-block">'+
                '<h1 class="clock-val">%M</h1>'+
            '</div>'+
            '<h4 class="clock-text"> Mins </h4>'+
        '</div>'+
        '<div class="countdown-block-container">'+
            '<div class="countdown-block">'+
                '<h1 class="clock-val">%S</h1>'+
            '</div>'+
            '<h4 class="clock-text"> Sec </h4>'+
        '</div>'));
    })
    .on('finish.countdown', function (event) {
        $(this).html('This offer has expired!')
            .parent().addClass('disabled');

    });

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.

New year's eve in

<div class="countdown-container">
    New year's eve in
    <span class="countdown" id="countdown2"></span>
</div>

$('#clock').countdown('2021/10/10', function(event) {
    var $this = $(this).html(event.strftime(''
        + '<span>%w</span> weeks '
        + '<span>%d</span> days '
        + '<span>%H</span> hr '
        + '<span>%M</span> min '
        + '<span>%S</span> sec'));
    });