A countdown timer showing NaN NaN NaN only on iphone device.

Shopify Discussion
1

Hello Everyone,

I have a countdown timer that works on desktop and android device but when I use iphone to view the countdown, it shows NaN NaN NaN for the timer. Any help would be much appreciated. Thank you in advance!

var check = 1;
var date = document.getElementsByClassName('date')[0].innerText.split('-');
var time = document.getElementsByClassName('time')[0].innerText.trim();
var countDownDate = new Date(+date[1]+' '+date[0]+' '+date[2]+' '+time+':00').getTime();
var x = setInterval(countDown, 1000);
function countDown() {
  var now = new Date().getTime();
  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);

  // Output the result in an element with id="demo"

  var dz = '';
  if(days<10){dz=0};

  var hz = '';
  if(hours<10){hz=0};

  var mz = '';
  if(minutes<10){mz=0};

  var sz = '';
  if(seconds<10){sz=0};

  if(days != 0){
    document.getElementById("days").innerHTML = dz+''+days;
  }else{
    $('div#countdown span').css('font-size','24px');
    $('span#days').hide();
  }
  if(hours != 0){
    document.getElementById("hours").innerHTML = hz+''+hours;
  }else{
    $('div#countdown span').css('font-size','28px');
    if(days == 0){
      $('span#hours').hide();
    }
  }
  document.getElementById("minutes").innerHTML =mz+''+minutes; 
  document.getElementById("seconds").innerHTML =sz+''+seconds;

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
    document.getElementsByClassName('collection-timer-main')[0].classList.add('sale-end');
    slickOn();
      $('.collection-timer-wrapper').show();
  }else{
      if(check==1){
      slickOn();
        $('.collection-timer-wrapper').show();
        check = 2;
      }
  }
}
2

Hi @Geriace

change “-” to “/”

// 2022/09/10
var date = document.getElementsByClassName('date')[0].innerText.split('/');
3

Hello Kani,

Thank you for taking your time to help me. Unfortunately after changing “-” to “/”. The timer across desktop, android and iphone appears NAN NAN NAN. Before editing, it was only iphone safari has the NAN NAN NAN on the timer. But still very appreciated the help!

4

In line 4…

var countDownDate = new Date(+date[1]+' '+date[0]+' '+date[2]+' '+time+':00').getTime();

you pass a string value. Different browsers can parse that string differently. The universally recognised format for times is yyyy-mm-ddThh:mm:ss.sssZ, as explained here. By adding “.000” you should solve the problem.

Check this.