JavaScript 日時の加算と減算のサンプル(Dateオブジェクト)

JavaScriptの日時の加算と減算を行うサンプルです。Dateオブジェクトを使用します。

目次

手順

  • 日時の加算と減算は以下の手順で行います。
    1.現在日時または指定日時を、Dateオブジェクトをnewして生成する。
    2.変更対象の日時をgetメソッドで取得する。
    3.取得した値を足すまたは引く。
    4.setメソッドで再設定する。

3ヶ月先を求める

例として、2017/10の3ヶ月先を求めます。
3行目は、2017/10/1をセットしています。設定の月は-1になるので(2017,9,1)になります。
7行目は、変更対象の月をgetMonthメソッドで取得して3を足し、setMonthメソッドで再設定しています。

<script>
// 1.年月日をセット
var date2 = new Date(2017,9,1);
document.write(date2.toLocaleString() + "<br>"); //2017/10/1 0:00:00

// 2. 月の計算
date2.setMonth(date2.getMonth() + 3);
document.write(date2.toLocaleString() + "<br>"); //2018/1/1 0:00:00
</script>

注:2017/1/30のgetMonth + 1は、2017/3/2となります。(2017/2は、2/28までのため)
単純に月だけを計算する場合は、月初を求めてからgetMonthメソッドを使用して下さい。
月初を表示

3日前を求める

例として、2017/1/2の3日前を求めます。
3行目は、2017/1/2をセットしています。設定の月は-1になるので(2017,0,2)になります。
7行目は、変更対象の日をgetDateメソッドで取得して3を引いて、setDateメソッドで再設定しています。

<script>
// 1.年月日をセット
var date3 = new Date(2017,0,2);
document.write(date3.toLocaleString() + "<br>"); //2017/1/2 0:00:00

// 2. 日の計算
date3.setDate(date3.getDate() - 3);
document.write(date3.toLocaleString() + "<br>"); //2016/12/30 0:00:00
</script>

3時間先を求める

例として、2017/12/31 22:00の3時間先を求めます。
3行目は、2017/12/31をセットしています。設定の月は-1になるので(2017,11,31)になります。
7行目は、変更対象の時間をgetHoursメソッドで取得して3を足して、setHoursメソッドで再設定しています。

<script>
// 1.年月日をセット
var date4 = new Date(2017,11,31,22,00);
document.write(date4.toLocaleString() + "<br>"); //2017/12/31 22:00:00

// 2. 時間の計算
date4.setHours(date4.getHours() + 3); // +3時間
document.write(date4.toLocaleString() + "<br>"); //2018/1/1 1:00:00
</script>

月初を表示

DateオブジェクトのsetDateメソッドで月初を表示できます。
7行目は、setDateメソッドの引数に1をセットして月初を求めています。
→2017/2/1と表示されます。

<script>
// 1.年月日をセット
var date2 = new Date(2017,1,22);
document.write(date2.toLocaleString() + "<br>"); //2017/2/22 0:00:00

// 2. 月初を表示
date2.setDate(1);
document.write(date2.toLocaleString() + "<br>"); //2017/2/1 0:00:00
</script>

月末を表示

DateオブジェクトのsetDateメソッドで月末を求めることができます。
setDate(0)は、前月の末日を取得する仕様のため以下の手順で行います。
この例では、2017/2の月末を求めます。
7行目は、setDateメソッドの引数に1をセットして対象の月初を求めます。
10行目は、getMonthメソッドで1ヶ月後を求めます。(2017/3/1)
13行目は、setDate(0)で前月の末日を表示します。
→2017/2の月末の2017/2/28と表示されます。

<script>
// 1.年月日をセット
var date2 = new Date(2017,1,22);
document.write(date2.toLocaleString() + "<br>"); //2017/2/22 0:00:00

// 2. 月初を表示
date2.setDate(1);
document.write(date2.toLocaleString() + "<br>"); //2017/2/1 0:00:00
// 3. 1ヶ月後を表示
date2.setMonth(date2.getMonth() + 1);
document.write(date2.toLocaleString() + "<br>"); //2017/3/1 0:00:00
// 4. 前月の末日を表示
date2.setDate(0);
document.write(date2.toLocaleString() + "<br>"); //2017/2/28 0:00:00
</script>

7行目でsetDate(1)とする理由:
「3ヶ月先を求める」の注:を参照願います。

ローカル時刻の表示(参考)

Dateオブジェクトを使用してローカル時刻を表示するサンプルです。
6行目は、設定の月は-1になるので+1しています。
8行目は、曜日が数字で返ってきます。0は日曜日~6は土曜日になります。

<script>
var date1 = new Date();
document.write(date1.toLocaleString() + "<br>"); //2017/4/3 18:02:52

document.write('年:', date1.getFullYear() + "<br>");	
document.write('月:', (date1.getMonth() + 1) + "<br>"); //月は1足す
document.write('日:', date1.getDate() + "<br>");
document.write('曜日:', date1.getDay() + "<br>"); // 0は日曜日~6は土曜日
document.write('時:', date1.getHours() + "<br>");
document.write('分:', date1.getMinutes() + "<br>");
document.write('秒:', date1.getSeconds() + "<br>");
document.write('ミリ秒:', date1.getMilliseconds() + "<br>");
</script>

Dateオブジェクト

  • Dateオブジェクトの主なコンストラクタです。
    コンストラクタ 説明
    Date() 現在の日時を生成する
    Date(YYYY,MM,DD,hh,mm,ss,SSS) 指定の日時を生成する
     hh,mm,ss,SSSは省略可能
  • Dateオブジェクトのローカルの日時を取得する主なメソッドの一覧です。
    メソッド 説明
    getFullYear 年を取得する (4桁)
    getMonth 月を取得する (0~11)
    getDate 日を取得する (1~31)
    getDay 曜日を取得する (0~6) ※0は日曜日で6は土曜日を表す。
    getHours 時を取得する (0~23)
    getMinutes 分を取得 する(0~59)
    getSeconds 秒を取得する (0~59)
    getMilliseconds ミリ秒を取得する (0~999)
  • Dateオブジェクトのローカル日時を表示する主なメソッドです。
    メソッド 説明
    toLocaleString() ローカルの日時を表示する
  • Dateオブジェクトのローカル日時をセットする主なメソッドです。
    メソッド 説明
    setFullYear 年を設定する(4桁)
    setMonth 月を設定する(0~11)
    setDate 日を設定する(1~31)
    setHours 時を設定する(0~23)
    setMinutes 分を設定する(0~59)
    setSeconds 秒を設定する(0~59)
    setMilliseconds ミリ秒を設定する(0~999)
  • 以下はMDNのDateオブジェクトのリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

関連の記事

JavaScript 日時の差分を求めるサンプル(Dateオブジェクト)



△上に戻る