【日付を比較して自動処理！】jsで現在日時、開始日時、終了日時を計算して処理を行う手順をご紹介
Web2017年5月26日
「●月●日●時」になったら何かの処理を行いたいなどの機能を実装する場合、jsで日付比較して処理を行うととても便利です。本記事ではjsのnew Date()を使った日付比較による処理方法をご紹介させていただきたいと思います。
サンプルコード
(function($){
//現在日時を取得
var now = new Date();
var nowDate = now.getTime();
//開始日時を指定
var start = "2017-05-01 00:00:00";
startDateFunc = function() {
start = start.replace(/-| /g, ':').split(':');
startDate = new Date(start[0], start[1] - 1, start[2], start[3], start[4], start[5]);
return startDate;
};
startDateFunc(start);
startDate = startDate.getTime();
//終了日時を指定
var end = "2017-05-08 00:00:00";
endDateFunc = function() {
end = end.replace(/-| /g, ':').split(':');
endDate = new Date(end[0], end[1] - 1, end[2], end[3], end[4], end[5]);
return endDate;
};
endDateFunc(end);
endDate = endDate.getTime();
//開始日時以前の処理
if(startDate >= nowDate){
alert("開始日時以前の処理");
}
//開始日時～終了日時の期間の処理
if(startDate <= nowDate && endDate >= nowDate){
alert("開始日時～終了日時の期間の処理");
}
//終了日時以降の処理
if(endDate <= nowDate){
alert("終了日時以降の処理");
}
})(jQuery);- ※jQueryを読み込んでいる場合のスクリプトとなります
解説
現在日時の取得
new Date()で取得した現在時刻を変数nowに格納します。これで「Mon May 01 2017 09:50:49 GMT+0900」といったような日付の文字列が取得できるのですが、このままでは計算できないため、さらにnow.getTime()で「1970/1/1午前0時からの現在までのミリ秒」を取得して変数nowDateに格納します。
開始日時を指定
開始日時を変数startに格納します。これを先ほどの現在時刻と比較できるようにするにはやはり「1970/1/1午前0時からの現在までのミリ秒」に変換する必要があるので、関数startDateFuncを用意して変換します。
まずはreplaceを使って年、月、日、時、分、秒をすべて区切って配列に格納します。そしてのnew Date()の中で「start[1] - 1」といった調整をすることで、月の表記を合わせます。
startDateFunc(start);で関数を実行し値を変数startに戻します。この値をgetTime()させることで、「1970/1/1午前0時からの現在までのミリ秒」を取得できます。
終了日時を指定
やっていることは開始日時と同じです。最終的には変数endDateに「1970/1/1午前0時からの現在までのミリ秒」を格納しています。
以上、これらの「現在日時」「開始日時」「終了日時」を使って、「開始日時以前」「開始日時～終了日時」「終了日時以降」で異なった処理をさせることができます。サンプルコード後半のif文がそれに当たります。
開始日時以前の処理
startDate >= nowDateで判別できます。
「1970/1/1午前0時からの現在までのミリ秒」が現在日時よりも開始日時の方が多い（開始日時を過ぎていない）場合ということになります。
開始日時～終了日時の期間の処理
startDate <= nowDate && endDate >= nowDateで判別できます。
「1970/1/1午前0時からの現在までのミリ秒」が現在日時よりも開始日時の方が少ない（開始日時を過ぎている）かつ、現在日時よりも終了日時の方が多い（終了日時を過ぎていない）場合ということになります。
終了日時以降の処理
endDate <= nowDateで判別できます。
「1970/1/1午前0時からの現在までのミリ秒」が現在日時よりも終了日時の方が小さい（終了日時を過ぎている）場合ということになります。
まとめ
あくまでもローカルタイム（PCの時間）を取得しての実装なのでユーザー次第で表示が変わってしまうことはありますが、これらの日時比較を使いこなすと、サイト運用の手間を減らすことができるケースもあります。（ある時間に到達したら特定のバナーを消す、特定のテキストを表示させる、など）
サーバタイムを取得できる環境であればそちらを使ってユーザーのPC時間にとらわれずより確実性の高い処理を行うことも可能です。
覚えておいて損はないテクニックですので、ぜひご参考にしていただければ幸いです。