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

はじめに

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

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

 

環境

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

Moment.js 2.29.1

 

現象

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

 

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で認識されるフォーマットではないためです。
ChromeFirefoxは、これを補完してくれている?ようです。

(誤)

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

(正)

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

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

 

さいごに

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

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

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-JavaScript
-, ,