close

# 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'));
        });