moment.js を使った日付の計算

準備

知識

HTML,JSの超基礎

CDNの追加

こちらより最新のCDNを読み込むだけで実行可能です。
一応コピペできるように載せておきます。
1つ目が本体で、2つ目が日本語用のjsファイルの読み込みです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/ja.min.js"></script>

日時の取得とセット

日時の取得

内部的にはDate() を　moment()にうまく置き換えていると考えてもらっていいともいます。もちろん書き方は多少異なります！

出力のformatはかなりたくさんあるので公式HPから取得したいデータを取れるようにしておくとかなり便利です！

「docs」⇨「display」
ここを確認するれば基本的なことは解決します。

const a = moment();//現在の日時
const b = moment('2021-08-14');
const c = moment('08-14-2021', 'MM-DD-YYYY');
const d = moment(new Date(2021, 0, 14));
const e = moment([2021, 11, 14]);

console.log(a.format('LLLL'));
console.log(b.format('LLLL'));
console.log(c.format('LLLL'));
console.log(d.format('LLLL'));
console.log(e.format('LLLL'));
//出力
//2021年8月14日 土曜日 04:37
//2021年8月14日 土曜日 00:00
//2021年8月14日 土曜日 00:00
//2021年1月14日 木曜日 00:00
//2021年12月14日 火曜日 00:00

基本的momentオブジェクトを使った時間を含めた日時の取得

日本語だと少し違いがわかりにくいのでlocaleを使って英語に変換しています。

const d = moment('2021-08-14 05:35:24');

console.log(d.format('HH:mm:ss'));
console.log(d.format('hh:mm:ss a'));
console.log(d.format('l'));
console.log(d.format('ll'));
console.log(d.format('lll'));
console.log(d.format('llll'));
console.log(d.format('L'));
console.log(d.format('LL'));
console.log(d.format('LLL'));
console.log(d.format('LLLL'));

const en = d.locale('en');
console.log(en.format('l'));
console.log(en.format('ll'));
console.log(en.format('lll'));
console.log(en.format('llll'));
console.log(en.format('L'));
console.log(en.format('LL'));
console.log(en.format('LLL'));
console.log(en.format('LLLL'));
// 出力
// 05:35:24
// 05:35:24 午前
// 2021/08/14
// 2021年8月14日
// 2021年8月14日 05:35
// 2021年8月14日(土) 05:35
// 2021/08/14
// 2021年8月14日
// 2021年8月14日 05:35
// 2021年8月14日 土曜日 05:35

// 8/14/2021
// Aug 14, 2021
// Aug 14, 2021 5:35 AM
// Sat, Aug 14, 2021 5:35 AM
// 08/14/2021
// August 14, 2021
// August 14, 2021 5:35 AM
// Saturday, August 14, 2021 5:35 AM

いろいろな形で出力したい

配列やオブジェクト、メモとしての出力

const d = moment('2021-08-14 05:35:24');

console.log(d.daysInMonth());
console.log(d.toArray());
console.log(d.toObject());
//today: L だと勝手に文字が変換されてしまうので[]で囲むと文字列になるよ
console.log(d.format('[Today]: L'));

// 出力
// 08月は31日間あります。
// [2021, 7, 14, 5, 35, 24, 0]
// {years: 2021, months: 7, date: 14, hours: 5, minutes: 35, …}
// Today: 2021/08/14

値をセットしたい

const d = moment('2021-08-14 05:35:24');
console.log("セット前: " + d.format('LLLL'));
d.set('year', 2020);
d.month(0);
d.hour(1).minute(1);
// 2020年01月1日 01:01をセット
console.log("セット後: " + d.format('LLLL'));

// 出力
// セット前: 2021年8月14日 土曜日 05:35
// セット後: 2020年1月14日 火曜日 01:01

日時の計算

元の日付に足したり引いたり

const d = moment('2021-08-14 05:35:24');

console.log("初期値: " + d.format('LLLL'));
console.log("3日後: " + d.clone().add(3, 'day').format('LLLL'));
console.log("3年前: " + d.clone().subtract(3, 'year').format('LLLL'));
console.log("1年2ヶ月後: " + d.clone().add(1, 'y').add(2, 'M').format('LLLL'));
console.log("1年2ヶ月後: " + d.clone().add({year: 1, month: 2}).format('LLLL'));
console.log("1年2ヶ月後: " + d.clone().add({y: 1, M: 2}).format('LLLL'));
// 出力
// 初期値: 2021年8月14日 土曜日 05:35
// 3日後: 2021年8月17日 火曜日 05:35
// 3年前: 2018年8月14日 火曜日 05:35
// 1年2ヶ月後: 2022年10月14日 金曜日 05:35
// 1年2ヶ月後: 2022年10月14日 金曜日 05:35
// 1年2ヶ月後: 2022年10月14日 金曜日 05:35

2つの日時の差分を求める

const d_1 = moment('2021-08-14 05:35:24');
// 2時間30分後に設定
const d_2 = moment('2021-08-14 08:05:24');

console.log("デフォルトの差分単位はms: " + d_2.diff(d_1));
console.log("引数でhourを設定するも時間単位でしか差分を表示しない: " + d_2.diff(d_1, 'hour'));
console.log("trueで正しく出力できるよ: " + d_2.diff(d_1, 'hour', true));

console.log("fromnowは現在との差を指すからよく使うよ: " + d_1.fromNow());
// 出力
// デフォルトの差分単位はms: 9000000
// 引数でhourを設定するも時間単位でしか差分を表示しない: 2
// trueで正しく出力できるよ: 2.5
// fromnowは現在との差を指すからよく使うよ: 16分前

日時の判定

const d_1 = moment('2021-08-14 05:35:24');
// d_1の2時間30分後に設定
const d_2 = moment('2021-08-14 08:05:24');
// d_1の10時間30分後に設定
const d_3 = moment('2021-08-14 16:05:24');

console.log("d_1は正しい日時がセットされてますか？：" + d_1.isValid());
console.log("d_1はd＿2より前ですか？：" + d_1.isBefore(d_2)); 
console.log("d_1はd＿2より後ですか？：" + d_1.isAfter(d_2)); 
console.log("d_1とd＿2は同じですか？：" + d_1.isSame(d_2)); 
console.log("d_2はd＿1とd＿3の間ですか？：" + d_2.isBetween(d_1, d_3)); 
console.log("d_1は閏年ですか？：" + d_1.isLeapYear()); 
// 出力
// d_1は正しい日時がセットされてますか？：true
// d_1はd＿2より前ですか？：true
// d_1はd＿2より後ですか？：false
// d_1とd＿2は同じですか？：false
// d_2はd＿1とd＿3の間ですか？：true
// d_1は閏年ですか？：false

参照

moment.js公式サイト(https://momentjs.com/)
ドットインストール(https://dotinstall.com/lessons/basic_momentjs)