【JavaScript】スマホ表示で日付がNaNになる原因と解決法

この記事からわかること

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

自作アプリを作成中、PC表示では思い通りに表示されていた日付がスマホ表示ではNaNになってしまいました。

知っていれば対処は簡単でしたが、これからの作成時に注意しないといけないポイントなので原因と対処方をまとめておきます。

スマホで日付を表示させる方法

原因

スマホのブラウザが「-」に対応できない

解決策

「-」を「/」に置換する

この現象は日付操作ができるDateオブジェクトを使用した際に発生します。

new Dateでインスタンス化する際に引数として日付データを渡しますが、その際のフォーマットはYYYY-MM-DD形式でもYYYY/MM//DD形式でも対応してくれます。しかしスマホ表示の場合は「-」があるとNaNになってしまいうまく表示されないようです。

let postDay ='2020-3-15 12:35:11';
let posted = new Date(postDay);
echo posted;

「- (ハイフン)」が悪さをしているのでreplaceメソッドを使ってインスタンス化する前に日付フォーマットである「/ (スラッシュ)」に置換すれば解決できます。

let postDay ='2020-3-15 12:35:11';
let posted = new Date(postDay.replace(/-/g,"/"));
echo posted ;

スマホで表示されている「NaN」とはNot-A-Numberの略称で数字ではない値を表すJavaScriptのグローバルオブジェクトのプロパティです。

グローバルオブジェクトとはJavaScript内でどこからでもアクセスできる定義済みのオブジェクトで、windowなどが良い例です。

値が数値として解釈できない時や文字列と数値の演算などが発生した際にNaNとして値が返されることがあります。

NaNは比較することができないのも特徴です。値がNaNであることを識別するにはisNaNメソッドを使用します。

NaN === NaN // false
isNaN(NaN) // true

PCのブラウザでは問題なく表示されていてもスマホから表示させようとするとNaNになってしまいました。

これはChromeとSafariが「-」付きの日付に対応していないことが原因のようです。

Laravelのデータベース関連でtimestampsを使っている場合updated_atなどの日付が「-」付きで格納されるので注意が必要です。

コードを書いている時はなかなか気づけないのでLaravelのデータベース日時情報は「-」付きと覚えておくと良いかもしれません。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。