0

I wonder if anyone can help, I'm making a countdown timer which swaps out content on completion. Works great on Desktops, but fails on iOS devices showing NaN for the date components. I realise it is now something to do with parsing the date, and it being in the wrong format for iOS, but I cannot seem to solve it.

const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");
const totalSecondsEL = document.getElementById("TotalSecondsWB");

var EndDate = '10:00 9 November 2020'

var myVar = setInterval(countDown, 1000);

function countDown() {
  const countdownDate = new Date(EndDate);
  const currentDate = new Date();

  const totalSeconds = (countdownDate - currentDate) / 1000;

  const days = Math.floor(totalSeconds / 3600 / 24);
  const hours = Math.floor(totalSeconds / 3600) % 24;
  const mins = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formatTime(hours);
  minsEl.innerHTML = formatTime(mins);
  secondsEl.innerHTML = formatTime(seconds);
  totalSecondsEL.innerHTML = Math.floor((countdownDate - currentDate) / 1000);

  if ((Math.floor((countdownDate - currentDate) / 1000)) < 1) {
    document.getElementById('countdown-section').innerHTML = document.getElementById('giveaway-section').innerHTML;
    myStopFunction();
  }
}

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

function myStopFunction() {
  clearInterval(myVar);
}

countDown();
<div id="countdown-section">
  <h1>Our next drop is in:</h1>
  <div class="countdown-container">
    <div class="countdown-el day-c">
      <p class="big-text" id="days">0</p>
      <span>Days</span>
    </div>

    <div class="countdown-el day-c">
      <p class="big-text" id="hours">0</p>
      <span>Hours</span>
    </div>

    <div class="countdown-el day-c">
      <p class="big-text" id="mins">0</p>
      <span>Minutes</span>
    </div>

    <div class="countdown-el day-c">
      <p class="big-text" id="seconds">0</p>
      <span>Seconds</span>
    </div>
  </div>
  <div style="display: none;" class="countdown-el day-c">
    <p class="big-text" id="TotalSecondsWB">0</p>
    <span>Seconds</span>
  </div>
</div>

<div id="giveaway-section">
  <h1>this will display the £1 bouquet section</h1>
</div>
Olian04
  • 6,480
  • 2
  • 27
  • 54
  • "10:00 9 November 2020" is not a format supported by ECMA-262 so parsing is implementation dependent. Given `new Date('10:00 9 November 2020')` both iOS and MacOS return an invalid Date. Avoid the built–in parser. – RobG Nov 01 '20 at 22:48
  • Thanks RobG, think it's sorted now. Many thanks. – GonzoRibbons Nov 03 '20 at 09:16

0 Answers0