にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

指定日までの残り日数を計算して表示する方法 [日付・時刻]

JavaScriptを使えば、「今日から指定日までの間にあと何日残っているのか?」や「ある日から今日まで何日間が経過したのか?」といった日数の差をカウントして表示することも簡単です。現在日時や指定日時をgetTimeメソッドで数値(「1970年1月1日0時0分0秒」からの経過ミリ秒)に変換してから引き算すれば簡単に計算できます。

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

「今日から指定日までの間にあと何日残っているのか?」を調べたいことがあります。計算方法は簡単で、「指定日」から「今日の日付」を引き算すれば良いだけですよね。
その逆に「ある日から今日まで何日間が経過したのか?」を調べたいこともあります。これも簡単で、「今日の日付」から「ある日」を引き算すれば良いだけです。
問題は、その日数の差の計算をどうやって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つの数値を与えると、その日付と現在日時との差を計算して文字列を出力します。

JavaScriptソース

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関数を例えばボタンクリックで実行するなら、以下のように書けます。

HTMLソース

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

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



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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---