WebDesign Dackel

JSのDateを使う際のメモ書き

Hatena0
Google+0
Pocket0
Feedly0

もう世の中に腐るほど出ている情報ですが、地味にハマったのでメモです。

new Date()のコンストラクタの指定形式

YYYY/MM/DD HH:DDは問題ありません。ただ、ハイフンでつないだYYYY-MM-DD HH:DDはIE8以下でNaNを返す。
これの挙動を知らずに20分くらいハマりました。調べればすぐに出てくるようなことなのですが…。

間違い:

var date = new Date("2015-03-03 16:23");
// IE8でNaN!

正しい:

var date = new Date("2015/03/03 16:23");
// スラッシュならOK

他にも、IE8で使えない指定方法などあるみたいです。下記のブログが非常に参考になりました。

JavaScriptでnew Date()した時にNaNを返してしまうエラーの対処方法(IE8以下で発生)|halapper.net

日時の比較はDateオブジェクトで出来る

これまでDate#getTime()でミリ秒に変換してから比較していました。しかしDateオブジェクトのままで比較できるので、オブジェクトを使った比較の方が無駄なく比較出来ます。

間違い:

var date1 = new Date("2015/02/01 00:00").getTime();
var date2 = new Date("2015/01/01 00:00").getTime();
if( date1 > date2 ){
  alert("date1の方が未来です");
}else{
  alert("date2の方が過去です");
}

正しい:

var date1 = new Date("2015/02/01 00:00");
var date2 = new Date("2015/01/01 00:00");
if( date1 > date2 ){
  alert("date1の方が未来です");
}else{
  alert("date2の方が過去です");
}

結局ライブラリに頼るのが安全

JSの日付周りはかなり扱いづらい?ため、やっぱりここはライブラリに頼ってサクッと実装するのが吉の様な気がします。
今一番人気なのはMoment.jsかなと思います。シンプルに使えるし日本語の対応もしているので実務でも使いやすいです。

柔軟な指定ができて、日付の加算や減算、ロケールの変換なども自由自在です。もちろんIE8でも大丈夫です。JSで日付を扱う際には、ぜひ導入したいライブラリですね。

一番はじめにIE8でNaNになってしまっていたコードも、こんな感じの指定で問題なく動きます。

moment("2015-03-03 16:23", "YYYY-MM-DD HH:mm");

詳しい使い方に興味がある方はぜひプロジェクトページをご確認ください。

Moment.js Documentation