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.

I'm not sure if I'm understanding the way you are using the plugin, or if it's even the same plugin as this: http://keith-wood.name/countdown.html#zones However, I used the plugin on a site and passed it the date/time to countdown to in timezone -7 like this: jQuery('#countdown').countdown({until: new Date(2020, 1-1, 11, 5, 35, 35), timezone:-7, format:'YODHMS', compact: true}); Perhaps this helps? — jonathanbell, May 16 '15 at 00:33

Pavan Kumar Jorrigala · Answer 1 · 2015-05-20T23:50:56.870

5

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/

edited May 20 '15 at 23:50

answered May 17 '15 at 21:45

Pavan Kumar Jorrigala

3,085
16
27

Hi. I am using this plugin: http://keith-wood.name/countdown.html - calling it as per the example code in the question above – Martin May 20 '15 at 03:58
Thanks the keithwood example works well, EXCEPT, it is adding an erroneous 3 in-front of the days, see here: http://jsfiddle.net/w1oyv8kv/3/ – Martin May 25 '15 at 06:20
month ranges from 0 to 11, you mentioned 2015,5,30 it falls under June , if you are looking for May change it to 2015,4,30 – Pavan Kumar Jorrigala May 25 '15 at 13:42

score 4 · Answer 2 · answered May 13 '15 at 03:25

4

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.

answered May 13 '15 at 03:25

Michal

2,532
1
19
27

Correct, it is being parsed in by PHP. In this format: 2015-05-14 17:30:00 Using php or javascript, how can i tell javascript though that this date/time is in GMT+10 rather than the users own timezone? – Martin May 13 '15 at 07:27
I think what Michal is saying is that you can set up an array like this: `var timeZones = [ "GMT", "EST", "CMT" ];` and then do something like `date_default_timezone_set( timeZones[1] );` – jmcmahon443 May 19 '15 at 21:58

score 1 · Answer 3 · answered May 13 '15 at 03:36

1

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

answered May 13 '15 at 03:36

Lim H.

9,870
9
48
74

I have tried adding event.finalDate.setUTCHours(10); just before $(this).html(event.strftime(format)); and nothing changes. – Martin May 13 '15 at 07:25

Setting timezone while using jQuery CountDown

3 Answers3