Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

指定日までの残り日数を計算して表示する

「今日から指定日までの間にあと何日残っているのか?」を調べたいことがあります。
計算方法は簡単で、「指定日」から「今日の日付」を引き算すれば良いだけですよね。(^_^;)
問題は、その残日計算を、どうやってJavaScriptでやるか、ですが。

JavaScriptでは(JavaScriptに限りませんが)、日付を数値で管理しています。
JavaScriptの場合は、「1970年1月1日0時0分0秒」からの経過時刻を「ミリ秒」で表した値が使われています。
なので、この値を引き算してやれば、2つの日付間の日数が(ミリ秒で)分かります。

つまり、「今日から指定日までの間にあと何日残っているのか?」を調べるには、「指定日の数値」から「今日の数値」を引いて、差分のミリ秒を出し、86,400,000で割れば良いわけです。(1日は86,400,000ミリ秒なので。=24時間×60分×60秒×1,000ミリ秒)

で、その日付の数値(=「1970年1月1日0時0分0秒」からの経過ミリ秒)を得るには、Dateオブジェクトに対してgetTimeメソッドを使えば良いだけです。例えば以下のように。

var dnum = dateObject.getTime();

上記のように書くと、変数「dnum」に、Dateオブジェクト「dateObject」が示す日付の『「1970年1月1日0時0分0秒」からの経過ミリ秒』が格納されます。

今日の日付を数値(「1970年1月1日0時0分0秒」からの経過ミリ秒)に変換する方法

まずは、今日の日付を数値(「1970年1月1日0時0分0秒」からの経過ミリ秒)に変換してみます。
正確には「今日の日付」ではなく「今の日時」ですが。
これはとても簡単で、例えば以下のように書けば良いだけです。

var nowDate = new Date();
var dnum = nowDate.getTime();

Dateオブジェクトを作成すれば、その作成時の日時が格納されます。なので、単にそのオブジェクトに対してgetTimeメソッドを使えば良いだけです。
ちなみに、もっと短く以下のようにも書けます。

var dnum = Date.now();

いずれにしても、変数dnumには、今の日時を数値(「1970年1月1日0時0分0秒」からの経過ミリ秒)で表した値が入ります。
上記のソースを使って、得られた数値をアラートとして表示させると、以下のように表示されます。

任意の日付の数値(「1970年1月1日0時0分0秒」からの経過ミリ秒)を得る方法

さて、任意の日付の数値を得るには、Dateオブジェクトに日付を設定してやってから、先と同じ方法を使えば良いだけです。
日付を手動で設定した上で、先と同じように数値に変換するには、以下のように記述します。

var targetDate = new Date("2014/2/5");
var dnum = targetDate.getTime();

すごく簡単ですね。^^;
ちなみに、年月日の各数値が変数に入っている場合などは、以下のように個別に引数として渡す方が扱いやすい気がします。

var targetDate = new Date( 2014, 1, 5 );
var dnum = targetDate.getTime();

ただこの場合、「月」の数値は、1月=0、2月=1、3月=2……のように、「0始まり」で指定しないといけないので、紛らわしいので注意して下さい。(^_^;;;
上記のソースを使って、得られた数値をアラートとして表示させると、以下のように表示されます。

指定日までの残り日数を計算して表示する

ようやく本題です。先の2点を組み合わせれば、指定日までの残り日数を計算して表示することも簡単です。
以下のような感じで書けば良いでしょう。

function showDiffDate() {
   // 現在日時を数値に変換
   var nowDate = new Date();
   var dnumNow = nowDate.getTime();

   // 指定日時を数値に変換
   var targetDate = new Date( 2014, 11, 31 ); // ※注:2014/12/31 のこと。
   var dnumTarget = targetDate.getTime();

   // 引き算して残日数を計算
   var diffMSec = dnumTarget - dnumNow;
   var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
   var showDays = Math.ceil( diffDays ); // 小数点以下を切り上げる

    // 表示
   var Msg = "指定日まであと " + showDays + "日です。";
   alert(Msg);
}

上記のソースでは、変数を使いまくって冗長に記述しています。その方が処理内容が分かりやすいと思いますので。実際に使うときには、もっと短くできるでしょう。^^;
また、指定日をソース中で決め打ちしていますし、「指定日が過ぎた場合」の処理などを一切書いていません。その辺は書くのが面倒なので本題ではないので省略しています。(^_^;;;

なお、実際に表示すると、以下のようになります。

まあそんなわけで、日付をミリ秒に直してから引き算することで、2つの日付の差を表示する方法でした。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど