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

「今日から指定日までの間にあと何日残っているのか？」を調べたいことがあります。計算方法は簡単で、「指定日」から「今日の日付」を引き算すれば良いだけですよね。
その逆に「ある日から今日まで何日間が経過したのか？」を調べたいこともあります。これも簡単で、「今日の日付」から「ある日」を引き算すれば良いだけです。
問題は、その日数の差の計算をどうやってJavaScriptでするか、ですが。

まず年を引き算して、次に月を引き算して……などと計算するのは面倒ですし非効率的です。特に、年や月をまたぐような計算が激しく面倒です。

日付の差を1回の引き算で求める方法

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

例えば、

のようになります。(※ローカル時刻ではなくGMT)

つまり、例えば「今日から指定日までの間にあと何日残っているのか？」を調べるには、「指定日の数値」から「今日の数値」を引いて差のミリ秒を出し、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点を組み合わせれば、指定日までの残り日数を計算して表示することも簡単です。
まず、以下のような感じでJavaScriptソースを書いておきます。ここで作成しているshowDiffDate関数は、引数に「年,月,日」の3つの数値を与えると、その日付と現在日時との差を計算して文字列を出力します。

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

   // 指定日時を数値に変換
   var targetDate = new Date( tYear, tMonth-1, tDay );	// 月の値は 1 を引く必要がある点に注意。(※1月は0、2月は1、……12月は11)
   var dnumTarget = targetDate.getTime();

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

   // 表示
   var Msg;
   if( showDays >= 0 ) {
      Msg = "指定日まであと " + showDays + "日です。";
   }
   else {
      Msg = "指定日は " + (showDays * -1) + "日前に過ぎました。";
   }
   return Msg;
}

上記のソースでは、変数を使いまくって冗長に記述しています。その方が処理内容が分かりやすいと思いますので。実際に使うときには、もっと短くできるでしょう。^^;
上記で作成したshowDiffDate関数を例えばボタンクリックで実行するなら、以下のように書けます。

	<input type="button" value="今日から2016年12月31日までの日数は？" onclick="alert( showDiffDate(2016,12,31) );">
	<input type="button" value="今日から2017年12月31日までの日数は？" onclick="alert( showDiffDate(2017,12,31) );">
	<input type="button" value="今日から2018年12月31日までの日数は？" onclick="alert( showDiffDate(2018,12,31) );">

上記のHTML＋JavaScriptソースを表示すると、以下のように見えます。
クリックすると、差の日数がアラートボックスに表示されます。

そんなわけで、日付をミリ秒に直してから引き算することで、2つの日付の差を表示する方法でした。
なお、特定の日時を自由な書式で表示する方法については、別途「今日の日付・時刻を表示する方法」をご参照下さい。

(更新日：2017年06月15日)