Reputation: 23
This code is working perfectly fine in Google Chrome while not working in Internet Explorer.
It is code of timer written in JavaScript and used with HTML.
If anyone can help console of both chrome and Internet Explorer screenshots are also attached. They show no errors.
function makeTimer() {
// var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");
var endTime = new Date("19 May 2020 17:30:00 GMT+05:00");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") {
hours = "0" + hours;
}
if (minutes < "10") {
minutes = "0" + minutes;
}
if (seconds < "10") {
seconds = "0" + seconds;
}
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}
setInterval(function() {
makeTimer();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-inline-block py-3" id="timer">
<div class="d-inline-block px-3" id="days" style="border-right:1px solid white; color:#44cbe1"></div>
<div class="d-inline-block px-3" id="hours" style="border-right:1px solid white; color:#44cbe1"></div>
<div class="d-inline-block px-3" id="minutes" style="border-right:1px solid white; color:#44cbe1"></div>
<div class="d-inline-block px-3" id="seconds" style="color:#44cbe1"></div>
</div>
Upvotes: 1
Views: 301
Reputation: 18619
The problem is with Date.parse
. As of ES6, its parsing behavior is standardized, so the most modern browsers support it quite uniformly.
However, as MDN points out, the parsing behavior was implementation-dependent until ES5, and largely different among browsers.
Since no version of Internet Explorer supports ES6 fully, the problem is that IE's parser is unable to parse the date and therefore returns NaN
.
Date.parse
As you try to parse
Date
objects, you can simply cast them into numbers, that have the same effect.
Since division (/
) automatically casts its operands to numbers, you can just omit Date.parse
entirely:
function makeTimer() {
// var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");
var endTime = new Date("19 May 2020 17:30:00 GMT+05:00");
endTime = (endTime / 1000);
var now = new Date();
now = (now / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") {
hours = "0" + hours;
}
if (minutes < "10") {
minutes = "0" + minutes;
}
if (seconds < "10") {
seconds = "0" + seconds;
}
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}
setInterval(function() {
makeTimer();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-inline-block py-3" id="timer">
<div class="d-inline-block px-3" id="days" style="border-right:1px solid white; color:#44cbe1"></div>
<div class="d-inline-block px-3" id="hours" style="border-right:1px solid white; color:#44cbe1"></div>
<div class="d-inline-block px-3" id="minutes" style="border-right:1px solid white; color:#44cbe1"></div>
<div class="d-inline-block px-3" id="seconds" style="color:#44cbe1"></div>
</div>
Upvotes: 1
Reputation: 81
19 May 2020 17:30:00 GMT+05:00
Is invalid in IE it should be:
19 May 2020 17:30:00 GMT+0500
Chrome has a better parser in Date object I guess and tolerates different formats
Upvotes: 1