Moment.jsを使ってみる

2019.07.13

日付を簡単に扱えるJavascriptのライブラリ「Moment.js」を使ってみます。

使い方

Moment.jsを使う方法はいくつかありますが、今回はファイルをダウンロードしてから使ってみます。
公式サイトにアクセスして、上部にあるDownloadからmoment.jsをダウンロードします。

ダウンロード完了後、HTMLに読み込ませます。

<script src="./moment.js"></script>

これで準備完了です。
実際に現在の日付と指定した日付をフォーマットを揃えてconsoleに表示してみます。

JavaScript

// 現在の日時を取得
var now = moment();
console.log(now.format('YYYY年MM月DD日')); // 現在の年月日

// 日付を指定する場合
var day = moment('2019-02-21');
console.log(day.format('YYYY年MM月DD日')); // 2019年02月21日

var day2 = moment('20210221');
console.log(day2.format('YYYY年MM月DD日')); // 2021年02月21日

フォーマットを指定して表示するデモページ
現在の日時を取得する場合は引数なしでmoment()を呼び出します。
日時を指定したい場合はmoment()の引数に指定します。
　

日付の指定

日付の指定方法についていくつか試してみます。

JavaScript

var day = moment('2019-02-21 17:30');
console.log(day.format('YYYY年MM月DD日')); // 2019年02月21日

var day2 = moment('20190221');
console.log(day2.format('YYYY年MM月DD日')); // 2019年02月21日

var day3 = moment({
	year: 2019,
	month: (2 - 1),
	day: 21
});
console.log(day3.format('YYYY年MM月DD日')); // 2019年02月21日

var day4 = moment({
	y: 2019,
	M: (2 - 1),
	d: 21
});
console.log(day4.format('YYYY年MM月DD日')); // 2019年02月21日

var day5 = moment(1550674800000);
console.log(day5.format('YYYY年MM月DD日')); // 2019年02月21日

var date = new Date(2019, (2-1), 21);
var day6 = moment(date);
console.log(day6.format('YYYY年MM月DD日')); // 2019年02月21日

var day7 = moment([2019, (2 - 1), 21]);
console.log(day7.format('YYYY年MM月DD日')); // 2019年02月21日

var day8 = moment(day7);
day8.year(2018);
console.log(day7.format('YYYY年MM月DD日'), day8.format('YYYY年MM月DD日')); // 2019年02月21日 2018年02月21日

日付を指定するデモページ
文字列や配列、オブジェクト、new Date()を使った方法などが用意されています。
詳しくは公式ドキュメントのParseの項目ご確認ください。
　

フォーマットの変更

先ほどのデモにも使いましたが、フォーマットを変更するにはformat()を使います。

JavaScript

var day = moment('2019-02-21 17:30');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2019年02月21日 17:30:0
console.log(day.format('YY年M月D日 A hh:mm:ss SSS')); // 19年2月21日 PM 05:30:00 000
console.log(day.format('MMM/MMMM')); // Feb/February
console.log(day.format('d/ddd/dddd')); // 4/Thu/Thursday
console.log(day.format('DDD/w')); // 52/8
console.log(day.format('x')); // 1550737800000

フォーマットを変更するデモページ
そのほかのフォーマット項目についてはDisplayのFormatの項目をご確認ください。
　

日付の取得・変更

日付の一部取得や変更を試してみます。

JavaScript

var day = moment('2019-02-21 17:30:10');

// 取得
console.log(day.year()); // 2019
console.log(day.month()); // 1
console.log(day.date()); // 21
console.log(day.hour()); // 17
console.log(day.minute()); // 30
console.log(day.second()); // 10
console.log(day.day()); // 4

// 取得2
console.log(day.get('year')); // 2019
console.log(day.get('month')); // 1
console.log(day.get('date')); // 21
console.log(day.get('hour')); // 17
console.log(day.get('minute')); // 30
console.log(day.get('second')); // 10
console.log(day.get('day')); // 4

// 設定
day.year(2018);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年02月21日(Wednesday) 17:30:10
day.month((10 - 1));
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年10月21日(Sunday) 17:30:10
day.date(8);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年10月08日(Monday) 17:30:10
day.hour(8);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年10月08日(Monday) 8:30:10
day.minute(2);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年10月08日(Monday) 8:2:10
day.second(2);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年10月08日(Monday) 8:2:2
day.day(1);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2018年10月08日(Monday) 8:2:2

// 設定2
day.set('year', 2020);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2020年10月08日(Thursday) 8:2:2
day.set('month', (2 - 1));
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2020年02月08日(Saturday) 8:2:2
day.set('date', 21);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2020年02月21日(Friday) 8:2:2
day.set('hour', 0);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2020年02月21日(Friday) 0:2:2
day.set('minute', 0);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2020年02月21日(Friday) 0:0:2
day.set('second', 0);
console.log(day.format('YYYY年MM月DD日(dddd) H:m:s')); // 2020年02月21日(Friday) 0:0:0

日付の取得と変更のデモページ
取得はyear()やmonth()などを使うか、get()の引数に取得したい項目を指定して取得します。
設定したい場合も取得と同様にyear()やmonth()などを使うか、set()を使って設定します。
詳しくはGet + Setの項目をご確認ください。
　

加算と減算

先ほどのような値の変更ではなく、現在の値に加算や減算をする方法を試してみます。

JavaScript

var day = moment('2019-02-21 17:30:10');

// 加算と減算
day.add(1, 'years');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2020年02月21日 17:30:10
day.add(-4, 'months');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2019年10月21日 17:30:10
day.add(-13, 'days');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2019年10月08日 17:30:10
day.add(10, 'hours');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2019年10月09日 3:30:10
day.add(60, 'minutes');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2019年10月09日 4:30:10
day.add(-60, 'seconds');
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2019年10月09日 4:29:10
day.add({
	years: 1,
	months: 4,
	days: 12
});
console.log(day.format('YYYY年MM月DD日 H:m:s')); // 2021年02月21日 4:29:10

// 末日の場合
var day2 = moment('2019-01-31');
day2.add(1, 'months');
console.log(day2.format('YYYY年MM月DD日')); // 2019年02月28日

// 減算と加算
var day3 = moment('2019-10-08');
day3.subtract(1, 'years');
console.log(day3.format('YYYY年MM月DD日 H:m:s')); // 2018年10月08日 0:0:0
day3.subtract(5, 'months');
console.log(day3.format('YYYY年MM月DD日 H:m:s')); // 2018年05月08日 0:0:0
day3.subtract(-3, 'days');
console.log(day3.format('YYYY年MM月DD日 H:m:s')); // 2018年05月11日 0:0:0

加算と減算のデモページ
加算と減算にはadd()やsubtract()を使い、それぞれ第一引数に数値、第二引数に変更したい項目を指定します。
第一引数に正の値を指定するとはadd()は加算、subtract()は減算になり、逆に負の値を指定するとadd()は減算、subtract()は加算になります。
詳しくはManipulateの項目をご確認ください。
　

比較

日付同士の比較をいくつか試してみます。

JavaScript

var day = moment('2019-02-21');
var day2 = moment('2019-10-08');
var day3 = moment('2019-06-23');

var min = moment.max([day, day2, day3]);
var max = moment.min([day, day2, day3]);
console.log(min.format('YYYY年MM月DD日')); // 2019年10月08日
console.log(max.format('YYYY年MM月DD日')); // 2019年02月21日

console.log(day.fromNow()); // 5 months ago
console.log(day2.fromNow()); // in 3 months

console.log(day.from(day2)); // 8 months ago
console.log(day.to(day2)); // in 8 months
console.log(day.diff(day3, 'days')); // -122

比較のデモページ
min()で最小値(一番過去の日付)の取得、max()で最大値(一番未来の日付)の取得、fromNow()で現在日時からの比較、from()とto()、diff()は2つの日付の比較ができます。
詳しくはMaximumやMinimum、Time from now、Time from X、Time to X、Differenceの項目などをご確認ください。
　

日本語対応

Moment.jsはデフォルトだと英語表記ですが、日本語表記に変更してみます。
公式サイトからmoment-with-locales.jsをダウンロードします。

moment.jsの読み込みをmoment-with-locales.jsに変更します。

<script src="./moment-with-locales.js"></script>

日付の表示をいくつか試してみます。

JavaScript

moment.locale('ja');

var day = moment('2019-02-21 17:30');
console.log(day.format('LLLL')); // 2019年2月21日 木曜日 17:30
console.log(day.format('YYYY年MMMDo A hh:mm')); // 2019年2月21日 午後 05:30
console.log(day.format('MMM/MMMM')); // 2月/2月
console.log(day.format('ddd/dddd')); // 木/木曜日

var day2 = moment('2019-10-08');
console.log(day.fromNow()); // 5ヶ月前
console.log(day.fromNow()); // 5ヶ月前
console.log(day2.fromNow()); // 3ヶ月後

console.log(day.from(day2)); // 8ヶ月前
console.log(day.to(day2)); // 8ヶ月後

日本語対応のデモページ
1行目のmoment.locale(‘ja’)で日本語表記になるように設定しています。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930