忘れないように記録しとこ

カバの樹

【Moment.js】Safariでdiffを使ったら値がNaNになる

完全版を表示する

はじめに

普段はWindowsを使うので気が付かなかったのですが、MacのSafariでMoment.jsのdiffを使うと値がNaNになってしまう現象が起きていました（クライアントからの連絡

今回は、この原因と解決方法を記事にします。

 

環境

この記事は、以下の管理人の検証環境をもとにして記事にしています。

Moment.js 2.29.1

 

現象

ChromeやFirefoxなどで確認すると、以下の表示になります。

 

Safariでみると以下の状態になります。

 

原因・解決法

対象のソースコードはこちら

//開始日付け 
const baseDay = moment('2012-3-1'); 
//今日の日付け 
const today = moment();
//値がNaNになる
console.log(today.diff(baseDay));

Safariのコンソールを見ると以下の警告が表示されます。

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

早い話が、RFC2822またはISOで認識されるフォーマットではないためです。
ChromeやFirefoxは、これを補完してくれている？ようです。

（誤）

const baseDay = moment('2012-3-1');

（正）

const baseDay = moment('2012-03-01');

日付けの形式は「YYYY-MM-DD」が正しいです。
（誤）はこのフォーマットになっていないので、NaNになってしまいます。

 

さいごに

言われてみたら当たり前すぎるバグでした。

また悪名高いSafariがやってくれたよ！とか言ってすみませんでした（土下座

 

  • B!