Multiple instances that are Timezone Aware

[Aiphira]

Hi hi! So, I need to have multiple instances. Checked the Documentation, done - I have multiple of them! Then, I need to have it Timezone aware. Checked the Documentation, again, done - I have a countdown that is Timezone Aware! Now, how do I combine them? I tried multiple ways, but.. Still not working... What I am using for Timezone Aware:

var serverStart = moment.tz("2016-08-25 01:00", "Europe/Vilnius");
var currTime = new Date();

$('#countdown').countdown(serverStart.toDate())
.on('update.countdown', function(event) {
    $(this).html(event.strftime('%D:%H:%M:%S'));
})
.on('finish.countdown',function(event) {
    $(this).html("<div class='server'>Server Started</div>");
});

Now, for Multiple instances, it's just like in the Documentation:

$('[data-countdown]').each(function() {
  var $this = $(this), finalDate = $(this).data('countdown');
  $this.countdown(finalDate, function(event) {
    $this.html(event.strftime('%D:%H:%M:%S'));
  });
});

Can anyone help me on how to make the Multiple instances to be Timezone Aware?

[phillipsnick]

I forked the repo and did the following which allows me to define the current time.

https://github.com/phillipsnick/jQuery.countdown/commit/4ccd2272768de344f529af14cf6a2e26769dd3a6

[Dmitry-Kucher]

@phillipsnick hello! Thanks for your improvement. In my opinion it's a good candidate for pull request, because hardcoded value for "now" isn't a best practices. Almost all (maybe all) tasks required to define date from some server-related place instead of browser time.

Why you didn't make a pull request?

Possible another useful settings is just a seconds(or milliseconds) until final date. In this case not needed to pass value for final date through options. But looks like it's some kind of feature request.

[phillipsnick]

I haven't got time to write some tests and do things properly :(

One day I may get around to it!

[Aiphira]

Well, currently, I have it working like this, do not know if this is correct or anything, but it works! So... xD

<div id="countdown"></div>
<div id="countdown2"></div>

var websiteStart = moment.tz("2016-12-25 01:00", "Europe/Vilnius");
var forumStart = moment.tz("2018-08-25 01:00", "Europe/Vilnius");
var currTime = new Date();

$('#countdown').countdown(websiteStart.toDate())
.on('update.countdown', function(event) {
     $(this).html(event.strftime('%D:%H:%M:%S'));
})
.on('finish.countdown',function(event) {
    $(this).html("<div class='after_finish'>Website Online</div>");
});

$('#countdown2').countdown(forumStart.toDate())
.on('update.countdown', function(event) {
     $(this).html(event.strftime('%D:%H:%M:%S'));
})
.on('finish.countdown',function(event) {
    $(this).html("<div class='after_finish'>Forum Online</div>");
});

[karlosuccess]

To whoever needs it, I was facing the same issue and I found the solution in this article: Final Countdown jQuery plugin Multiple instances on the same page with Timezone Aware. It works like a charm. Nightmare is over. This example should be included in official website.