JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>
<script src="//momentjs.com/downloads/moment.js"></script>
<script src="//momentjs.com/downloads/moment-timezone-with-data-2010-2020.js"></script>
<!-- change the date-countdown attribute -->
<div data-countdown="2015/05/20" data-zone="US/Central" class="countdown"></div>
<div data-countdown="2015/05/20" data-zone="Atlantic/Madeira" class="countdown"></div>
<div data-countdown="2015/05/20" data-zone="Africa/Asmara" class="countdown"></div>
<!-- go through the following url for timezones
https://github.com/moment/moment-timezone/tree/develop/builds
-->
JavaScript
var timefun = function (countdown,zone){
var date = moment.tz(countdown,"YYYY/MM/DD",zone);
console.log(date.valueOf());
return date.valueOf();
}
$('.countdown').each(function(){
$(this).countdown(timefun($(this).data("countdown"),$(this).data("zone"))).on('update.countdown', function(event) {
var format = '%-S second%!S';
if (event.offset.years > 0 || event.offset.weeks > 0 || event.offset.days > 0 || event.offset.hours > 0 || event.offset.minutes > 0) {
if(event.offset.minutes > 0) {
format = '%-M minute%!M ' + format;
}
if(event.offset.hours > 0) {
format = '%-H hour%!H ' + format;
}
if(event.offset.days > 0) {
format = '%-d day%!d ' + format;
}
if(event.offset.weeks > 0) {
format = '%-w week%!w ' + format;
}
}
$(this).html(event.strftime(format));
}).on('finish.countdown', function(event) {
$(this).html('Finished');
});
});