iPentec.com  /  Doc  /  JavaScript  /  日付・時刻

目次

日付の加算、減算をする - JavaScript

JavaScriptで日付の加算、減算をするコードを紹介します。

概要

指定した日付から数日後の日付や数日前の日付を求めたい場合があります。単純に日付を引いただけでは月またぎなど自分で実装する必要がありますが、 Dateオブジェクトのset*メソッドを利用すると日付の加算、減算を簡単に実装できます。

書式

日を設定する場合

(Dateオブジェクト).setDate([設定する日])

月を設定する場合

(Dateオブジェクト).setMonth([設定する月])

年を設定する場合

(Dateオブジェクト).setFullYear([設定する年])

時を設定する場合

(Dateオブジェクト).setHours([設定する時])

分を設定する場合

(Dateオブジェクト).setMinutes([設定する時])

秒を設定する場合

(Dateオブジェクト).setSeconds([設定する時])

ミリを設定する場合

(Dateオブジェクト).setMilliseconds([設定する時])

プログラム例:日付の加算、減算

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
    function DateTimeProcAddDate() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setDate(dtobj.getDate() + 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcAddMonth() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setMonth(dtobj.getMonth() + 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcAddYear() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setFullYear(dtobj.getFullYear() + 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcSubDate() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setDate(dtobj.getDate() - 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcSubMonth() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setMonth(dtobj.getMonth() - 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcSubYear() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setFullYear(dtobj.getFullYear() - 1);

      textbox.value = GetDateString(dtobj);
    }


    function GetDateString(dateobj) {
      date_string = 'YYYY/MM/DD';
      date_string = date_string.replace(/YYYY/g, dateobj.getFullYear());
      date_string = date_string.replace(/MM/g, dateobj.getMonth() + 1);
      date_string = date_string.replace(/DD/g, dateobj.getDate());
      return date_string;
    }

  </script>

</head>
<body>
  <input id="input" type="text" value="2021/6/25" />
  <br />
  <input type="button" value="1日加算" onclick="DateTimeProcAddDate();" />
  <input type="button" value="1月加算" onclick="DateTimeProcAddMonth();" />
  <input type="button" value="1年加算" onclick="DateTimeProcAddYear();" />
  <input type="button" value="1日減算" onclick="DateTimeProcSubDate();" />
  <input type="button" value="1月減算" onclick="DateTimeProcSubMonth();" />
  <input type="button" value="1年減算" onclick="DateTimeProcSubYear();" />
</body>
</html>

解説

ページのボタンをクリックするとテキストボックスに入力されている日付を加算、減算します。

ボタンのクリックで実行されるJavaScriptは下記です。
    function DateTimeProcAddDate() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setDate(dtobj.getDate() + 1);

      textbox.value = GetDateString(dtobj);
    }

はじめにテキストボックスの文字列からDateオブジェクトを作成します。この処理の詳細はこちらの記事を参照してください。
  var textbox = document.getElementById("input");
  var dtobj = new Date(textbox.value);

作成したDateオブジェクトのsetDate()メソッドを呼び出し日を設定します。現在の日にちはDateオブジェクトの getDate()メソッドで取得できます。１日加算する場合は、getDateメソッドで取得した 日にちに1を足した値ををsetDateメソッドの引数に与えます。減算する場合は、同様に getDateメソッドで取得した日にちから1を引いた値をsetDateメソッドの引数に与えます。
  dtobj.setDate(dtobj.getDate() + 1);

月、年の加算、減算の場合はsetDateの部分を、setMonth, setFullYear メソッドにします。

Dateオブジェクトの日付の値を文字列に変換して、テキストボックスに表示します。 Dateオブジェクトを文字列依変換する GetDateString() メソッドの動作の詳細はこちらの記事を 参照してください。
  textbox.value = GetDateString(dtobj);

実行結果

日の加算

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。テキストボックスに 2021/6/25 の文字列が表示されています。


ページの[1日加算]のボタンをクリックします。テキストボックスの表示が 2021/6/26 に変化します。元の日付に1日加算されたことが確認できます。


[1日加算]ボタンをクリックすると、１日ずつ日付が進みます。2021/6/30 まで進めた状態で、[1日加算]ボタンをクリックします。


ボタンをクリックすると、テキストボックスの文字列が 2021/7/1 に変化します。月またぎの処理も正しくできていることが確認できました。

月の加算

続いて[1月加算]ボタンをクリックします。


元の日付の値から1か月進んだ日付がテキストボックスに表示されます。


[1月加算]ボタンをクリックするごとに月が進みます。12月(2021/12/24)まで進めた状態で、さらに[1月加算]のボタンをクリックします。


日付が翌年の1月の表示(2022/1/24)になります。月を加算して年をまたぐ処理も正しくできることが確認できました。


プログラム例:時間の加算、減算

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">

    function DateTimeProcAddSecond() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setSeconds(dtobj.getSeconds() + 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcAddMinute() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setMinutes(dtobj.getMinutes() + 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcAddHour() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setHours(dtobj.getHours() + 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcSubSecond() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setSeconds(dtobj.getSeconds() - 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcSubMonute() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setMinutes(dtobj.getMinutes() - 1);

      textbox.value = GetDateString(dtobj);
    }

    function DateTimeProcSubHour() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setHours(dtobj.getHours() - 1);

      textbox.value = GetDateString(dtobj);
    }

    function GetDateString(dateobj) {
      date_string = 'YYYY/MM/DD hh:mm:ss';
      date_string = date_string.replace(/YYYY/g, dateobj.getFullYear());
      date_string = date_string.replace(/MM/g, dateobj.getMonth() + 1);
      date_string = date_string.replace(/DD/g, dateobj.getDate());
      date_string = date_string.replace(/hh/g, dateobj.getHours());
      date_string = date_string.replace(/mm/g, dateobj.getMinutes());
      date_string = date_string.replace(/ss/g, dateobj.getSeconds());
      return date_string;
    }
  </script>
</head>
<body>
  <input id="input" type="text" value="2021/11/16 22:45:50" />
  <br />
  <input type="button" value="1秒加算" onclick="DateTimeProcAddSecond();" />
  <input type="button" value="1分加算" onclick="DateTimeProcAddMinute();" />
  <input type="button" value="1時間加算" onclick="DateTimeProcAddHour();" />
  <input type="button" value="1秒減算" onclick="DateTimeProcSubSecond();" />
  <input type="button" value="1分減算" onclick="DateTimeProcSubMonute();" />
  <input type="button" value="1時間減算" onclick="DateTimeProcSubHour();" />
</body>
</html>

解説

ページのボタンをクリックするとテキストボックスに入力されている日付を加算、減算します。

ボタンのクリックで実行されるJavaScriptは下記です。
    function DateTimeProcAddSecond() {
      var textbox = document.getElementById("input");

      var dtobj = new Date(textbox.value);
      dtobj.setSeconds(dtobj.getSeconds() + 1);

      textbox.value = GetDateString(dtobj);
    }

はじめにテキストボックスの文字列からDateオブジェクトを作成します。この処理の詳細はこちらの記事を参照してください。
  var textbox = document.getElementById("input");
  var dtobj = new Date(textbox.value);

作成したDateオブジェクトのsetSeconds()メソッドを呼び出して、秒の値を設定します。現在の秒はDateオブジェクトの getSeconds()メソッドで取得できます。 1秒日加算する場合は、getDateメソッドで取得した秒に1を足した値ををsetSecondsメソッドの引数に与えます。 減算する場合は、同様に getSecondsメソッドで取得した秒の値から1を引いた値をsetSecondsメソッドの引数に与えます。
  dtobj.setSeconds(dtobj.getSeconds() + 1);

分、時の加算、減算の場合はgetSecondsの部分を、setMinutes, setHours メソッドに変更します。

Dateオブジェクトの日付の値を文字列に変換して、テキストボックスに表示します。 Dateオブジェクトを文字列依変換する GetDateString() メソッドの動作の詳細はこちらの記事を 参照してください。
  textbox.value = GetDateString(dtobj);

実行結果

秒の加算

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。テキストボックスに 2021/11/16 22:45:50 の文字列が表示されています。


[1秒加算]のボタンをクリックします。1秒加算された時刻がテキストボックスに表示されます。


続けて[1秒加算]ボタンをクリックすると、さらに1秒加算された時刻がテキストボックスに表示されます。


[1秒加算]ボタンをクリックして59秒まで加算します。この状態で[1秒加算]ボタンをクリックします。


クリックすると、分が1増え、秒の値が0になります。分の値の増加ができていることが確認できます。

分の加算

テキストボックスに 2021/11/16 22:45:50 の文字列が表示されています。


[1分加算]ボタンをクリックすると、分の値が1増えます。テキストボックスに 2021/11/16 22:46:50 の値が表示されます。


クリックを続けて、59分まで加算します。この状態で[1分加算]ボタンをクリックします。


時間の値が1つ増え、分の値が0になります。時間の値の増加ができていることが確認できます。

時間の加算

テキストボックスに 2021/11/16 22:45:50 の文字列が表示されています。


[1時間加算]のボタンをクリックします。1時間増加した時刻の値 2021/11/16 23:45:50 がテキストボックスに表示されます。


もう一度[1時間加算]のボタンをクリックします。時刻の値が 0 になり、日付が1増えます。日にちの値のz効果ができることが確認できます。


さらに[1時間加算]のボタンをクリックするごとに、テキストボックスに表示される時刻の値が1時間づつ増加します。


著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

掲載日: 2021-10-26
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.