iOS上でjavascriptが一部だけNaNの値を返します

Question

解決したいこと

PCのブラウザ（Chrome、Safari）では正しく残り日数が表示されるのですが、iPhone12Pro上（Chrome、Safari、Brave)のブラウザではトップページの表示はされるのですが、詳細画面で正しく表示されません。（下記画像参照）
Android端末等、他の環境では確認しておりません。

何が原因でしょうか？
Dateメソッドはやはり使わないほうが良いのでしょうか？
解決方法がありましたらご教示くださいください！

発生している問題・エラー

![

該当するソースコード

正しく表示される

window.addEventListener('load', () => {
  const arrjsonInput = document.getElementById("arr_json");
  for (let i = 0; i < arrjsonInput.value ; i++) {
    const expirationInput = document.getElementById("expiration-date"+i);
    const today = new Date();
    const expirationDate = new Date(expirationInput.innerHTML);
    const daysLeft = document.getElementById("days-left"+i);
    daysLeft.innerHTML = (Math.round( (expirationDate.getTime() - today.getTime()) / ( 1000 * 60 * 60 * 24 )));
    if (daysLeft.innerHTML <= 0) {
     const deadLine = document.getElementById("dead-line"+i);
     deadLine.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
     daysLeft.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
    };
  };
});

NaNと表示される↓

window.addEventListener('load', () => {
  const expirationInput = document.getElementById("expiration_date");
  const today = new Date();
  const expirationDate = new Date(expirationInput.innerHTML);
  const daysLeft = document.getElementById("days_left");
  daysLeft.innerHTML = (Math.ceil( (expirationDate.getTime() - today.getTime()) / ( 1000 * 60 * 60 * 24 )));
 if (daysLeft.innerHTML <= 0) {
     const deadLine = document.getElementById("dead_line");
     deadLine.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
     daysLeft.setAttribute("style", "color:#7945F5;text-decoration:underline #7945F5;");
    };
});

show.html.erb

 <% if user_signed_in? && current_user.id == @item.user_id %>
        <div class="item-manage">
          <%= link_to "編集", edit_item_path(@item), class: :item__btn %>
          <%= link_to "削除", item_path(@item), method: :delete, class: :item__btn %>
        </div>
      <% end %>
      <div class="item_block">
        <div class="item_card">
            <div class="image-content">
              <%= link_to image_tag(@item.image.variant(resize: '200x200'), class: :card__img ) %>
            </div>

            <div class="daysleft-detail">
                <span id="dead_line">残り<span id="days_left"></span>日</span>
            </div>
            
            <div class="item-detail">
              <p class="detail__title">名前</p>
              <p class="detail__message">
                <%= @item.name %>
              </p>
            </div>
            <div class="item-detail">
              <p class="detail__title">数量</p>
              <p class="detail__message">
                <%= @item.quantity %>
              </p>
            </div>
            <div class="item-detail">
              <p class="detail__title">購入日</p>
              <p id="purchase_date">
                <%= @item.purchase_date %>
              </p>
            </div>
            <div class="item-detail">
              <p class="detail__title">賞味期限</p>
              <p id="expiration_date">
                <%= @item.expiration_date %>
              </p>
            </div>

            <% if @item.memo.present? %>
            <div class="item-detail">
              <p class="detail__title">メモ</p>
              <p class="detail__message">
                <%= @item.memo %>
              </p>
            </div>
            <% end %>
            <div class="nickname-content">
              <%= "by #{@item.user.nickname}" %>
            </div>

自分で試したこと

問題は-かなと思いましたが、replaceの使い方もよくわかりませんでした。

var dt = new Date(at.replace(/([+|\-])([0-9]{2})([0-9]{2})$/,"$1$2:$3"));

now=new Date(d.replace(/-/g,"/"));

Answer 1

おそらくインデント等が原因でした
.trim()で解決しました。
スマホの方でも表示できました。

Answer 2

日付や計算などは結構ブラウザ依存がある印象です（あくまで私的印象）
バリデーションなども含めて挙動を統一したい場合は、サーバーサイドから得るようにした方が確実かもしれません。

Comments

[yunyun_jp]

回答ありがとうございます
やはりそうなのですね、、、
ありがとうございました！