vue.jsでカウントダウンタイマーを作っていた時に起こった出来事。
ざっくり説明すると
DBに登録しているカウントダウンの終了日付をView側のカスタムコンポーネントに渡す
渡された日付はDate.parse()によって時間値に変換
現在日付も取得し時間値に変換、終了日付までの残り時間を計算していた
<countdown date="2017-10-15 23:59:59"></countdown>
しかし、デスクトップのブラウザ環境では動作したのですが、モバイルのブラウザ環境（※）では
NaN（invalid date）を返す・・・あれ？
※iOSのブラウザ環境
###原因
どうやら、Date.parse()に渡す日付文字列が間違っていたみたい
ドキュメントには以下のように書いてありました
引数：dateString
RFC2822 または ISO 8601 の日付を表す文字列 (他の書式が使用されることがあるため、結果は期待値にならない可能性があります)。
RFC2822またはISO 8601の日付？？？
普段使っている形式と異なり、見慣れていないので戸惑う・・・
※new Date()も同様の動作
この日付文字列の形式がブラウザ依存でサポートしていない場合があるみたい
iOSのブラウザ環境だと 2017-10-15 23:59:59 のようなハイフン区切りをサポートしていなくて
invalid dateでエラーをはいていた
デスクトップのブラウザ環境だと大丈夫だったので厄介ですね・・・。
###対処法
DBから取得したdatetime型の終了日付を
RFC2822またはISO 8601形式に変換してView側に渡してあげれば正常に動作しました。
<countdown date="2017-10-15T23:59:59+09:00"></countdown>
<countdown date="Sun, 15 Oct 2017 23:59:59 +0900"></countdown>
###まとめ
Date.parse()の日付文字列の解釈は実装依存みたい・・・
形式によっては解析してくれたり、NaNとなる環境もあるみたいなので注意が必要です！