[View the demo][demo]
jQuery Countdown is a plugin that allows you to easily create as many countdowns on your website as you would like. You can setup a countdown schedule by passing it in options or you can specify a data-countdown attribute to the div your calling jQuery Countdown on.
Drop jquery.countdown.min.js into your scripts folder. Drop jquery.countdown.css into your styles folder if you wish. Really you should just create your own styles. I've included jquery.countdown.css for reference.
Simple: Use the .countdown() method on a div with a data-countdown attribute.
<div id="countdown" data-countdown="January 01, 2020 15:00:00"></div>
$('#countdown').countdown();
Advanced: Use the .countdown() method on a div and pass a repeating schedule of events.
<div id="countdown"></div>
```
$('#countdown').countdown({ schedule: { "Wednesday": [ "17:00:00", "17:50:00" ], "Friday": [ "12:00:00" ] } });
## Working With Dates and Times
If you use the data-countdown attribute, your date format must be ````mmmm, dd, yyyy hh:mm:ss````, ex: ````January 01, 2020 15:00:00````.
If you are using a repeating schedule, look at the example above. You specify the day of the week you need times for and then pass an array of times in the ````hh:mm:ss```` format.
## More Options
These should be self-explanatory.
```
showYears: false,
showDays: true,
showHours: true,
showMinutes: true,
showSeconds: true,
Choose whether to show a time attribute when it reaches zero.
showOnZeroYears: false,
showOnZeroDays: true,
showOnZeroHours: true,
showOnZeroMinutes: true,
showOnZeroSeconds: true,
```
An example with some of these options:
$('#countdown').countdown({ schedule: { "Wednesday": [ "17:00:00", "17:50:00" ], "Friday": [ "12:00:00" ] }, showOnZeroDays: false, });
## Callbacks
jQuery Countdown supports 2 callbacks. One is an overall callback named countdownCallback and the other is a timerCallback that is run every 1 second. Pass them in options to run.
## Regional configurations
Added regional strings and support for singular or plural dates.
var regionalVar = { days: 'Dias', day: 'Dia', years: 'Anos', year: 'Ano', hours: 'Horas', hour: 'Hora', minutes: 'Minutos', minute: 'Minuto' }; $('#countdown').countdown( { regional: regionalVar });
## Support
File an issue on the [issue tracker.][issues]
[demo]: http://kheitzman.com/projects/jquery-countdown "jQuery Countdown"
[issues]: https://github.com/kaleblex/jquery-countdown/issues "Issue Tracker"