Countdown timer not working in Safari

Question

I have a countdown timer that is working prefect in chrome, however when I view in safari it shows NAN for all the numbers and also if I set the date in the past it will not trigger my model in the else statement. I have looked all over the net for a solution but have found none.

 $(document).ready(function() { $('#popupTimer').delay(1000).fadeIn(600); // Set the date we're counting down to (*** Set to Apr 9th after testing ***) var countDownDate = new Date("Apr 3, 2017 24:00:00").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="display" document.getElementById("display").innerHTML = days + " Days " + hours + " Hours " + minutes + " Minutes " + seconds + " Seconds "; // If the count down is finished, if (distance < 0) { clearInterval(x); document.getElementById("display").innerHTML = "EXPIRED"; $('#myModal').modal('show'); $(".myDIV").hide(); $('#chooseProductThree').show(); $(".panel-heading").addClass("active-panel"); } }, 1000); });

maybe Safari does not understand new Date getTime, so change it with Date.parse @Cory Kelly — Konstantinos
– Konstantinos, Commented Apr 5, 2017 at 0:15
different browsers have different date formats they can "parse" ... date strings are a nightmare for cross browser compatibility - look into libraries (momentjs is popular) which do much of the heavy lifting for you — Jaromanda X
– Jaromanda X, Commented Apr 5, 2017 at 0:35
@JaromandaX Thanks for the advice, I found a solution with momentjs — Cory Kelly
– Cory Kelly, Commented Apr 5, 2017 at 0:37

Omid Matouri · Accepted Answer · 2019-05-09 13:18:54Z

first write below function

function parseDateString (dateString) { var matchers = []; matchers.push(/^[0-9]*$/.source); matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source); matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source); matchers = new RegExp(matchers.join("|")); if (dateString instanceof Date) { return dateString; } if (String(dateString).match(matchers)) { if (String(dateString).match(/^[0-9]*$/)) { dateString = Number(dateString); } if (String(dateString).match(/\-/)) { dateString = String(dateString).replace(/\-/g, "/"); } return new Date(dateString); } else { throw new Error("Couldn't cast `" + dateString + "` to a date object."); } }

↓ ↓ ↓ ↓ ↓ then call this function like below ↓ ↓ ↓ ↓ ↓

var EndTime = "2019-05-10 00:00:00"; countDownDate=Date.parse(_self.parseDateString(EndTime));

var arr = "2010-03-15 10:30:00".split(/[- :]/), date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]); this is easier to implement (from stackoverflow.com/a/5324266/2173276)

jeremykenedy · Accepted Answer · 2020-07-07 20:21:50Z

I had the same issue and here is what I solved it with:

<script type="text/javascript"> const second = 1000; const minute = second * 60; const hour = minute * 60; const day = hour * 24; // Have to split time funny for IOS and Safari NAN and timezone bug var timeParsed = '{{ $startTime }}'.replace(' ', 'T').split(/[^0-9]/); var countDown = new Date(new Date (timeParsed[0],timeParsed[1]-1,timeParsed[2],timeParsed[3],timeParsed[4],timeParsed[5])).getTime(); let x = setInterval(function() { let now = new Date().getTime(); let distance = countDown - now; if(Math.floor(distance / (day)) > 0) { document.getElementById("days_line").style.display = "inline-block"; } else { document.getElementById("days_line").style.display = "none"; } document.getElementById('days').innerText = Math.floor(distance / (day)); document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)); document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)); document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second); if (distance < 0) { clearInterval(x); $('.counter-container').fadeOut(function() { $('.counter-message').fadeIn(); }); } else { $('.counter-container').fadeIn(); } }, second) </script>

note {{ startTime }} is not javascript but a PHP import from blade. Just put in your date there.

richerimage · Accepted Answer · 2020-11-29 10:30:26Z

Have just had this issue and fixed with the following date format (note: the '/' and not a '-' separating the day, month & year...

"2019/05/10T00:00:00Z";

Konstantinos · Accepted Answer · 2017-04-05 00:09:13Z

I assume safari cannot parse the date in this line:

var countDownDate = new Date("Apr 3, 2017 24:00:00").getTime();

Change to this:

var countDownDate = Date.parse("Apr 3, 2017 24:00:00");

Laith Ekermawi · Accepted Answer · 2023-06-20 22:19:32Z

the issue is in the date format It turns out that Safari doesn't support that date/time format Switching to one of the supported formats below will fix the issue

yyyy, mm, dd
yyyy, mm, dd, hh, mm, ss
mm/dd/yyyy
mm/dd/yyyy hh:mm:ss
milliseconds
Day Mon dd yyyy hh:mm:ss

For more details, you check this out https://chrispennington.blog/blog/safari-does-not-show-new-date-from-javascript/

Collectives™ on Stack Overflow

Countdown timer not working in Safari

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Related