Setting timezone while using jQuery CountDown

Question

Currently we have this code, which works, except it needs to use a specified timezone, rather than the user's timezone:

 $('#countdown').countdown('<?php echo $date_end?>').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');
        });

I have seen several examples of adding timezones, but none are using the jquery countdown plugin in the same way we are.

Any ideas on how to add +10 as the current timezone? so it uses that rather than the user's timezone?

Thanks.

Answer 1

I am guessing you are using https://github.com/hilios/jQuery.countdown, because it doesn't have timezone options to use it.

I used moment.js and moment-timezone-with-data.js(contains all the timezones) to handle timezone.

<div data-countdown="2015/05/20"  data-zone="US/Central" class="countdown"></div>

function to convert the date to proper timezone and returns in milliseconds

var timefun = function (countdown,zone){
 var date = moment.tz(countdown,"YYYY/MM/DD",zone);
 return date.valueOf();   
}

make use of the above function to pass milliseconds as an argument to jQuery.countdown()

$(".countdown").countdown(timefun($(".countdown").data("countdown"),$(".countdown").data("zone")))

example: http://jsfiddle.net/heLrsnqx/2/

if you are using http://keith-wood.name/countdown.html, refer following example

example: http://jsfiddle.net/w1oyv8kv/

Answer 2

Looks like the actual date that is used in the code is coming from that PHP snippet. You can set the default timezone in PHP using:

date_default_timezone_set($timezone_identifier);

$timezone_identifier is a string that can be things like 'UTC' or 'America/Los_Angeles'.

For a full list of supported timezone identifiers, see the related PHP docs.

Answer 3

According to the documentation, you can access the finalDate object with event.finalDate. So if you can't set the timezone server side, do event.finalDate.setUTCHours(10) before calling event.strftime

More on setUTCHours here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCHours