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>