Почему таймер в Google Chrome отображается корректно, а в Safari — нет?

Question

[corasao]

Всем хорошего времени суток!

Подскажите, пожалуйста, в чем может быть проблема?

Реализовал таймер для сайта. Вот так он выглядит в Chrome
https://monosnap.com/file/SoGAo9nbaZC3CKTKHqB7y6JV...
Работает корректно, идет обратный отчет.
Но вот как он выглядит в Safari
https://monosnap.com/file/blPhjifa7PDDMakBN10XVVmT...

Код HTML

<div class="callback__timer timer" data-time="'2022-11-25'">
                <div class="timer__item">
                  <span class="timer__num timer__days"></span>
                  <div class="timer__text">Днів</div>
                </div>
                <div class="timer__item">
                  <span class="timer__num timer__hours"></span>
                  <div class="timer__text">Годин</div>
                </div>
                <div class="timer__item">
                  <span class="timer__num timer__minutes"></span>
                  <div class="timer__text">Хвилин</div>
                </div>
                <div class="timer__item">
                  <span class="timer__num timer__seconds"></span>
                  <div class="timer__text">Секунд</div>
                </div>
              </div>

Koд JS

function getTimeRemaining(endtime) {
    const total = Date.parse(endtime) - Date.parse(new Date());
    const seconds = Math.floor((total / 1000) % 60);
    const minutes = Math.floor((total / 1000 / 60) % 60);
    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
    const days = Math.floor(total / (1000 * 60 * 60 * 24));

    return {
      total,
      days,
      hours,
      minutes,
      seconds,
    };
  }

  function initializeClock(id, endtime) {
    const clock = document.querySelector('.timer');
    const daysSpan = clock.querySelector('.timer__days');
    const hoursSpan = clock.querySelector('.timer__hours');
    const minutesSpan = clock.querySelector('.timer__minutes');
    const secondsSpan = clock.querySelector('.timer__seconds');

    function updateClock() {
      const t = getTimeRemaining(endtime);

      daysSpan.innerHTML = t.days;
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

      if (t.total <= 0) {
        clearInterval(timeinterval);
      }
    }

    updateClock();
    const timeinterval = setInterval(updateClock, 1000);
  }

  const deadline = $('.timer').attr('data-time');
  initializeClock('timer', deadline);

Код CSS не прилагаю, так как там обычная стилизация. Врядли она влияет на то что таймер в Safari не работает.

Подскажите, пожалуйста, в чем может быть проблема?

Заранее благодарен всем за ответы!

Answer 1

[Lynn «Кофеман»]

Уберите ненужные кавычки в data-time="'2022-11-25'"

Comments

[corasao]

OMG)))
Точно!

Кажеться, знаю почему так вышло)
Не так давно VS Code начала распознавать плагин выравнивания Beautify - нежелательным, так как к нему перестали выходить обновления.
Перешел на Prettier, так как он самый популярный.
И долго настраивал его. Особенно воевал с кавычками. И видимо он мне не только JS пофиксить решил, а и HTML с его скобками.

Спасибо большое! Очередной раз убеждаюсь что взляд со стороны супер важен! А то сам бы я скорее переписал бы еще раз JS, чем нашел эти скобки. Причем валидатор пропустил...

[Lynn «Кофеман»]

corasao, ну не знаю, по мне так всё просто.
NaN откуда-то взялся. И единственный разумный кандидат это Date.parse
А дальше просто посмотреть что же в него попадает.