Javascript Countdown Timer - not working as expected

Question

I have an issue in displaying counter between 2 dates. I know the issue and it is that Timezone is GMT+05:30

I need to know, how to rectify that

My Solution:

var start = new Date();
var end = new Date("2017-10-03"); // This date is coming from database as <?php echo $date_end; ?>

function getClock() {
    var start = new Date();
    var end   = new Date("<?php echo $date_end;  ?>");
    var diff  = Math.round((end.getTime() - start.getTime()) / 1000);
    var hours = Math.floor(diff / 3600);
    diff -= hours * 3600
    var minutes = Math.floor(diff / 60);
    diff -= minutes * 60;
    var seconds = diff % 60;
    if(document.getElementById('countdown')){
        document.getElementById('countdown').innerHTML = "<span>" 
        + hours + "</span> hours <span>" + minutes + "</span> minutes <span>" 
        + seconds + "</span> seconds";
    }
}

setInterval('getClock()', 1000);

As start date is 02 Oct 10PM and End date is 03 Oct. So as per time calculation i shall get timer of 2 hours

but i am getting timer is 2hours+5:30 = 7:30 hours.

Please help in getting right timer.

JS Fiddle link is HERE

Thomas5631 · Accepted Answer · 2017-10-02 17:51:38Z

1

You can get the timezone offset from the end date after you construct it, and then use that to reassign the value.

Here is a related question.

You can use the code from that post as follows:

var end = new Date("<?php echo $date_end;  ?>");
end.setTime( end.getTime() + end.getTimezoneOffset()*60*1000 );

answered Oct 2, 2017 at 17:51

Thomas5631

2441 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pv-Viana · Accepted Answer · 2017-10-02 17:53:32Z

1

Try something like this.

    setInterval(function(){
    var start = new Date();
    var end   = new Date("2017-10-03 00:00:00");
    var diff  = Math.round((end.getTime() - start.getTime()) / 1000);
    var hours = Math.floor(diff / 3600);
    diff -= hours * 3600
    var minutes = Math.floor(diff / 60);
    diff -= minutes * 60;
    var seconds = diff % 60;
    if(document.getElementById('countdown')){
        document.getElementById('countdown').innerHTML = "<span>" 
        + hours + "</span> hours <span>" + minutes + "</span> minutes <span>" 
        + seconds + "</span> seconds";
    }
}, 1000);

answered Oct 2, 2017 at 17:53

Pv-Viana

6428 silver badges26 bronze badges

Comments

Olivier Liechti · Accepted Answer · 2017-10-02 17:49:27Z

0

The problem is because of the way Javascript handles timezones in the Date constructor (check out the documentation for details). If, instead of passing ("2017-10-03") you pass (2017, 9, 3), it should work. To avoid these kinds of problems, it is a good idea to always work in UTC.

answered Oct 2, 2017 at 17:49

Olivier Liechti

3,1982 gold badges22 silver badges27 bronze badges

2 Comments

Gags Over a year ago

But then new date() will always give time in gmt+5:30. Then how these dates wll cope up. I am afraid if i ll convert start date in same way then if timer wll work or not

Olivier Liechti Over a year ago

When you use new Date() with no argument, the system time zone will be used. When you pass a string, it is treates as UTC. Check out developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… for details.

EJAg · Accepted Answer · 2017-10-02 18:02:06Z

0

Make sure you pass year, month and day separately to initialize the date, so the system timezone is used, same as when you initialize your start date:

var end_str = "<?php echo $date_end;  ?>";
var arr = end_str.split("-")
arr = Date.new(arr[0], arr[1]-1, arr[2]); //month is 0-indexed

edited Oct 2, 2017 at 18:02

answered Oct 2, 2017 at 17:55

EJAg

3,3382 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Javascript Countdown Timer - not working as expected

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related