1

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>

Console Screenshot

Internet Explorer Screenshot

WEB EDS
  • 23
  • 8
  • 1
    it makes no sense to show the screenshot of the working browser that throws no errors... show the output of the console from IE... – el solo lobo May 11 '20 at 06:47
  • Both Screenshots are attached now. – WEB EDS May 11 '20 at 06:51
  • Have you already looked here? https://stackoverflow.com/questions/13091523/javascript-invalid-date-error-in-internet-explorer – el solo lobo May 11 '20 at 06:53
  • The error is explicit, it says you forgot to close a tag somewhere ( or other). I don't think it has anything to do with your JS code. Chrome forgives some minor errors like that, IE doesn't. – Jeremy Thille May 11 '20 at 06:54
  • Yes I managed to close all tags now screenshot updated. but error is still same – WEB EDS May 11 '20 at 06:57

2 Answers2

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

Martin Dejmek
  • 81
  • 3
1

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>
FZs
  • 16,581
  • 13
  • 41
  • 50
  • Your still parsing the date in the constructor, so I wouldn't say your ommiting date parse entirely. – Keith May 11 '20 at 07:25