Java script code not working in Internet Explorer while working perfectly fine in Google Chrome

Question

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>

Answer 1

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

Answer 2

The problem

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 .

No need to use 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>