カウントダウンがiphoneではNaNとなり、表示しないです。

Question

残り時間のカウントダウンを追加しました。
iPhoneで閲覧するとNaNとなってしまい原因を探しています。

コード

<div>
	<p>残り<span class="countdown" data-date="2021-11-24 23:59"></span></p>
</div>

window.addEventListener('load',()=>{
  Countdown();
})

const Countdown = function(){
  const cd_areas = document.getElementsByClassName('countdown');
  [...cd_areas].forEach(cd_area=>{
    const target_unix = new Date(cd_area.dataset.date)/1000;
    setInterval(()=>{
      const now_unix = Math.floor(new Date()/1000);
      let sec = target_unix-now_unix;
      let cd_text = '';
      if(sec>=86400){
        cd_text += Math.floor(sec/86400)+'日';
        sec = sec%86400;
      }
      if(sec>=3600){
        cd_text += td(Math.floor(sec/3600))+'時間';
        sec = sec%3600;
      }else{
        cd_text += '00時間';
      }
      if(sec>=60){
        cd_text += td(Math.floor(sec/60))+'分';
        sec = sec%60;
      }else{
        cd_text += '00分';
      }
      cd_text += td(sec)+'秒';
      cd_area.textContent = cd_text;
    },1000);
  });

  function td(x){
    if(x<10){
      return '0'+x;
    }else{
      return x;
    }
  }
}	

  (function() {
    var deadline= '2021-04-25 20:00:00';
    function pad(num, size) {
        var s= "0" + num;
        return s.substr(s.length-size);
    }
    function getTimeRemaining(endtime) {
      var t= Date.parse(endtime) -Date.parse(new Date()),
          seconds= Math.floor((t /1000) % 60),
          minutes= Math.floor((t /1000 /60) % 60),
          hours= Math.floor((t /(1000 * 60 * 60)) % 24),
          days= Math.floor(t /(1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }
    function clock(id, endtime) {
      var days= document.getElementById(id + '-days')
          hours= document.getElementById(id + '-hours'),
          minutes= document.getElementById(id + '-minutes'),
          seconds= document.getElementById(id + '-seconds');
      var timeinterval= setInterval(function() {
        var t= getTimeRemaining(endtime);
        if (t.total <= 0){
          clearInterval(timeinterval);
        } else {
    days.innerHTML= pad(t.days, 2);
    hours.innerHTML= pad(t.hours, 2);
    minutes.innerHTML= pad(t.minutes, 2);
    seconds.innerHTML= pad(t.seconds, 2);
    }
      }, 1000);
    }
    clock('js-clock', deadline);
  })();

パソコン(Win)版、パソコンからスマホ表示、androidでは問題なく動いていたのですがどうやらiPhone(Macは未確認)ではうまく動いていないようです。
safariだけではなく、iPhoneからGoogleアプリでページを閲覧しても残り00時間00分NaN秒という表示になります。
なぜiPhoneではNaNとなるのでしょうか。
宜しければお力をお貸しください。

Answer 1

Date コンストラクター (および同じように動作する Date.parse()) を使用した日付文字列の解析は、ブラウザーによって違いや矛盾があるため、使用を避けることを強くお勧めします。。

Date() コンストラクター - JavaScript | MDN

とのことですから、使わない方がいいのでは。

当面は、Day.jsのようなライブラリを使った方がいいと思います。

Comments

[ojreee]

ありがとうございます。
そうだったのですね…別の方法を探して設置しようと思います。
ありがとうございます。

[int32_t]

ECMAScript の仕様で ISO8601形式は対応していることが保証されているので、new Date(cd_area.dataset.date.replace(' ', 'T')) と書けばどのブラウザでも動くと思います。