JavaScriptで日付と時間の操作はMoment.js

JavaScriptで10日後を求めるときの計算が、以下の様な感じだった時に嫌悪感を覚えた方は何人いるだろうか。

var dt = new Date();
dt.setDate(dt.getDate() + 10);

インストール

CDNにあったのでそのまま貼り付ければWebなら動く。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>

CDN以外で使う場合は以下参考

http://momentjs.com/docs/#/use-it/

ざっくりした使い方

moment.locale("ja"); //日本語に設定

var dt = moment("2016/11/29"); //文字列からオブジェクト生成
console.log(dt.format("YYYY/MM/DD(ddd)"))  //2016/11/29(火)

dt.add(10,'d');  //10日後
console.log(dt.format("YYYY年 MMM Do dddd"));  //2016年 12月 9日 金曜日

これだけで使う価値ががあると判断できる。

むしろ、JavaScriptのDateがこう進化するべきなんでは・・・。

抜粋

以下公式サイトから、よく使いそうなものだけかいつまみ。
量が多いので、詳しくは公式ドキュメントをみてくだせ。

Parse

今日

var now = moment();

nowには、momentオブジェクトが入る。

文字列から

moment("2015/11/10");
moment("2016-11-10 10:11:12");
moment("20161110");
moment("20161110T101015");

文字列とフォーマットから

これが中々いい。

moment("11-10-2016","MM-DD-YYYY");
moment("2010-10-20 4:30","YYYY-MM-DD HH:mm");
moment("1234","hmm");

文字列と複数のフォーマットから

複数のフォーマットのうちのどれかにヒットすれば解析できる。

moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"]);

オブジェクトから

moment({year:2000, month:0, day:1, minute:10, seconds:10, millisecond:123});
moment({y:2000, M:0, d:1, m:10, s:10, ms:123});

もちろん従来のDateも

var day = new Date(2011, 9, 16);
var dayWrapper = moment(day);

Get + Set

ゲッターとセッターは、引数無しでゲッターで有りでセッター。

moment("2016/11/10 11:11:10").year();
moment("2016/11/10 11:11:10").month();  
moment("2016/11/10 11:11:10").date();  
moment("2016/11/10 11:11:10").hour();  
moment("2016/11/10 11:11:10").minute(); 
moment("2016/11/10 11:11:10").second();  
moment("2016/11/10 11:11:10").millisecond();

moment("2016/11/10 11:11:10").seconds(15); // 2016/11/10 11:11:15
moment("2016/11/10 11:11:10").date(31));  //11月31日は無いので12月1日に繰り上げ
moment("2016/11/10 11:11:10").month(0));  //monthはDateと同じで0が1月

Durations

momentは日時オブジェクト以外に時間間隔オブジェクトにもなる。

var dur1 = moment.duration("11:11:10");
var dur2 = moment.duration({hours:11, minutes:11, seconds:10});
console.log(dur.seconds()); //10
console.log(dur.asSeconds()); //40270

Manipulate

加算

moment("2016/11/10").add(15,"d");
moment("2016/10/31").add(31,"d");
moment("2016/10/29").add(1,"M");
moment("2016/12/31").add(10,"s");
moment("2016/11/10").add(1,"w");

var dur = moment.duration(1,"y");
console.log(moment("2016/11/10").add(dur).format("YYYY/MM/DD")); //2017/11/10

減算

moment("2016/11/10").subtract(1,"d");
moment("2016/11/10").subtract(1,"y");

Start of Time

moment("2016/11/10").startOf("y"); //2016/01/01 00:00:00 年の始まり
moment("2016/11/10").startOf("M"); //2016/11/01 00:00:00 月の始まり
moment("2016/11/10").startOf("d"); //2016/11/10 00:00:00 日の始まり

End of Time

moment("2016/11/10").endOf("y"); //2016/12/31 23:59:59 年の終わり
moment("2016/11/10").endOf("M"); //2016/11/30 23:59:59 月の終わり
moment("2016/11/10").endOf("d"); //2016/11/10 23:59:59 日の終わり

Clone

オブジェクトなので、addするとそれ自体が加算されるけど追加されなく無い場合は、cloneで別オブジェクトを作る。

var y2016m01d01 = moment("2016/1/1");
var s_y2016m01d01 = y2016m01d01.clone();
y2016m01d01.add(1,"d")
console.log(y2016m01d01.format());
console.log(s_y2016m01d01.format());

momentにmomentつっこんでもcloneになる。

var a = moment([2012]);
var b = moment(a);
a.year(2000);
b.year(); // 2012

Validation

存在しない日時を入れると、Invalid dateになる。

moment("2016/13/31").format();  //Invalid date
moment("2016/13/31").isValid();  //false

Query

Is Same

moment('2010-10-20').isSame('2010-10-20'); // true

Is Between

moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true

Display

format

moment("2016/11/29").format("YYYY/MM/DD(ddd)"))  //2016/11/29(火)

Days in Month

月の日数

moment("2012-02", "YYYY-MM").daysInMonth() // 29

As Javascript Date

JavaScriptのDateの取得

moment().toDate();

素晴らしい。