JavaScriptで10日後を求めるときの計算が、以下の様な感じだった時に嫌悪感を覚えた方は何人いるだろうか。
|
1 2 |
var dt = new Date(); dt.setDate(dt.getDate() + 10); |
インストール
CDNにあったのでそのまま貼り付ければWebなら動く。
|
1 |
<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/
ざっくりした使い方
|
1 2 3 4 5 6 7 |
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
今日
|
1 |
var now = moment(); |
nowには、momentオブジェクトが入る。
文字列から
|
1 2 3 4 |
moment("2015/11/10"); moment("2016-11-10 10:11:12"); moment("20161110"); moment("20161110T101015"); |
文字列とフォーマットから
これが中々いい。
|
1 2 3 |
moment("11-10-2016","MM-DD-YYYY"); moment("2010-10-20 4:30","YYYY-MM-DD HH:mm"); moment("1234","hmm"); |
文字列と複数のフォーマットから
複数のフォーマットのうちのどれかにヒットすれば解析できる。
|
1 |
moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"]); |
オブジェクトから
|
1 2 |
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も
|
1 2 |
var day = new Date(2011, 9, 16); var dayWrapper = moment(day); |
Get + Set
ゲッターとセッターは、引数無しでゲッターで有りでセッター。
|
1 2 3 4 5 6 7 8 9 10 11 |
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は日時オブジェクト以外に時間間隔オブジェクトにもなる。
|
1 2 3 4 |
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
加算
|
1 2 3 4 5 6 7 8 |
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 |
減算
|
1 2 |
moment("2016/11/10").subtract(1,"d"); moment("2016/11/10").subtract(1,"y"); |
Start of Time
|
1 2 3 |
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
|
1 2 3 |
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で別オブジェクトを作る。
|
1 2 3 4 5 |
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になる。
|
1 2 3 4 |
var a = moment([2012]); var b = moment(a); a.year(2000); b.year(); // 2012 |
Validation
存在しない日時を入れると、Invalid dateになる。
|
1 2 |
moment("2016/13/31").format(); //Invalid date moment("2016/13/31").isValid(); //false |
Query
Is Same
|
1 |
moment('2010-10-20').isSame('2010-10-20'); // true |
Is Between
|
1 |
moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true |
Display
format
|
1 |
moment("2016/11/29").format("YYYY/MM/DD(ddd)")) //2016/11/29(火) |
Days in Month
月の日数
|
1 |
moment("2012-02", "YYYY-MM").daysInMonth() // 29 |
As Javascript Date
JavaScriptのDateの取得
|
1 |
moment().toDate(); |
素晴らしい。
CDNのURLはどこに貼り付ければよいのですか？
私はbodyの閉じタグの直前にスクリプトに関連するものは張っています。
・jquery関連
・jqueryプラグイン関連
・その他ライブラリとか
・自分のJS
の順番ですね。
その他ライブラリがmoment.jsとかになります。