1

My countdown timer works fine in Chrome but fails in Safari. Any thoughts as to why? Some reading suggests there is an issue with new Date but some attempts to change this have failed.

const launchDate = new Date("Jul 12, 2018 09:00:00 GMT-0400").getTime();
let timer = setInterval(function() {
    const today = new Date().getTime();
    const diff = launchDate - today;
    let days = Math.floor(diff / (1000 * 60 * 60 * 24));
    let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((diff % (1000 * 60)) / 1000);
    document.getElementById("timer").innerHTML =
        "<div class=\"days\"> \
        <div class=\"numbers\">" + days + "</div>days</div> \
        <div class=\"hours\"> \
        <div class=\"numbers\">" + hours + "</div>hours</div> \
        <div class=\"minutes\"> \
        <div class=\"numbers\">" + minutes + "</div>mins</div> \
        <div class=\"seconds\"> \
        <div class=\"numbers\">" + seconds + "</div>secs</div> \
        </div>";
}, 1000);
lowercase
  • 1,198
  • 9
  • 34
  • 56
  • 2
    In what manner does it fail? Are you getting an error? If so, where? Are you getting an incorrect result in your HTML output? If so, what? – pete Jul 09 '18 at 20:11
  • on Safari no countdown is shown at all. Pen here... https://codepen.io/anon/pen/pZzqMM – lowercase Jul 09 '18 at 20:20
  • I can see the countdown in the codepen on Safari Version 11.0.3 (13604.5.6) – Andrew Lohr Jul 09 '18 at 20:27
  • I can see the countdown on Safari version 11.1.1 too. – Saif Al Falah Jul 09 '18 at 20:28
  • Works in codepen - but not in a real browser on ipad/desktop. – lowercase Jul 09 '18 at 20:30
  • See https://stackoverflow.com/questions/5619202/converting-string-to-date-in-js for information on how to convert to a date. – Heretic Monkey Jul 09 '18 at 20:31
  • Can confirm, Codepen is doing something to make it work. Outside of codepen, the countdown does not display at all or displays 'NaN'. – lowercase Jul 09 '18 at 20:37
  • That would indicate that `const launchDate = new Date("Jul 12, 2018 09:00:00 GMT-0400").getTime();` is failing. Possibly related to [Invalid date in safari](https://stackoverflow.com/questions/4310953/invalid-date-in-safari) – pete Jul 09 '18 at 20:41
  • Yes I have narrowed it down to the new Date part, but no idea what to change that to. – lowercase Jul 09 '18 at 20:51
  • I don't suppose you've tried using the alternate constructor? (`const launchDate = new Date(2018, 6, 12, 9, 0, 0).getTime();`) – pete Jul 09 '18 at 21:10

0 Answers0