jQueryで現在の日付で判別し、対象期間中だけテキストを表示する

プロモーションが含まれています

jQueryで現在の日付で判別し、対象期間中だけテキストを表示する

更新せず放置するだけ!楽天でボーナス払いの設定をしていて、2つの期間だけボーナス払いができないので、現在の日付がその期間に該当する場合のみ「ボーナス払いができません」の表示をする方法

楽天Tips関連記事

関連記事をもっとみる

条件

・「6/16~7/15」と、「11/16~12/15」の期間に該当するとテキストを表示する。
・上の2つの期間は毎年変わらない(はず)。

デモは現在の日付とinputで入力した日付で動作確認できます。
現在の日付だけだと見れない事の方が多いのでw
inputの方は判別期間が今年になっているので今年の範囲内で試してみてください。

jQueryで現在の日付で判別し、対象期間中だけテキストを表示する

日付の定義をする

js

var startDate = "",
    endDate = "",
    dateText = "";

var now_year = new Date().getFullYear();

var startDate1st = new Date(now_year+"/6/16 00:00"),
    endDate1st = new Date(now_year+"/7/15 23:59"),
    text1st = "6/16~7/15";

var startDate2nd = new Date(now_year+"/11/16 00:00"),
    endDate2nd = new Date(now_year+"/12/15 23:59"),
    text2nd = "11/16~12/15";

var nowDate = new Date();

now_yearで現在の西暦で取得してstartDate1ststartDate2ndに入れています。
こうすれば毎年期間の変更がなければページを見た時の年が自動で入るので更新する必要がなくなります。
また、翌年の1月とかに期間がなってしまうとその部分を変更しなきゃなんで面倒ですが、とりあえず大丈夫そうです。

nowDateに今の日時を入れて、あとはこれらを比較して期間が近い方で判別させるだけです。

日付の比較して今に近い方の期間を判別する

js

var sabun1 = Math.abs(Math.ceil((nowDate - startDate1st) / 86400000)),
    sabun2 = Math.abs(Math.ceil((nowDate - startDate2nd) / 86400000));

if (sabun1 <= sabun2) {
    startDate = startDate1st;
    endDate = endDate1st;
    dateText = text1st;
}else if (sabun1 >= sabun2){
    startDate = startDate2nd;
    endDate = endDate2nd;
    dateText = text2nd;
}

sabun1でやってることは、まず今の日付と期間1の開始日を引きます。jsは直接日付の計算ができるので素敵ですね!
引くとミリ秒で結果が出るので、秒、分、時、日に直すと1000*60*60*24なので、1日が86400000で割ると日数が計算できます。
ただ、値がマイナスだと計算が面倒なのでMath.abs()で絶対値をとっています。
sabun2も同じことをやって、どちらが今の日付に近いかで最終判定に使う値を入れていきます。

今が期間内ならhtmlを変更する

js

if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
    $("#bonus").html(dateText + 'の間は、対象期間内。');
}else{
    $("#bonus").html("対象期間外");
}

if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {で期間内かを調べます。
【jquery】現在の時刻によって表示するバナーを切り替えるのものを使っています。
今回の場合だとelse以降はいらないですね。

jQueryで現在の時刻を判別し、表示するバナーを切り替える
楽天での話、例えばお買いものマラソンや楽天スーパーセールなどでイベントのエントリーバナーを時間になったら手動で変更すると時間を気にしなきゃいけないし、 なにより休業日から開催だと非常に困るので時間になったら自動でバナーが切...

まとめ

js

$(document).ready(function() {

    var startDate = "",
        endDate = "",
        dateText = "";

    var now_year = new Date().getFullYear();

    var startDate1st = new Date(now_year+"/6/16 00:00"),
        endDate1st = new Date(now_year+"/7/15 23:59"),
        text1st = "6/16~7/15";

    var startDate2nd = new Date(now_year+"/11/16 00:00"),
        endDate2nd = new Date(now_year+"/12/15 23:59"),
        text2nd = "11/16~12/15";

    var nowDate = new Date();

    var sabun1 = Math.abs(Math.ceil((nowDate - startDate1st) / 86400000)),
        sabun2 = Math.abs(Math.ceil((nowDate - startDate2nd) / 86400000));

    if (sabun1 <= sabun2) {
        startDate = startDate1st;
        endDate = endDate1st;
        dateText = text1st;
    }else if (sabun1 >= sabun2){
        startDate = startDate2nd;
        endDate = endDate2nd;
        dateText = text2nd;
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
        $("#bonus").html(dateText + 'の間は、対象期間内。');
    }else{
        $("#bonus").html("対象期間外");
    }

});

今までのコードを合わせるとこんな感じです。ざっくり動作確認はしていますが、よっぽど大丈夫だと思います。
もし、期間の丁度真ん中で間違った方の期間で比べたとしても、そもそもの判定期間外なのは確実なので表示されることはありません。

一番危険なのは、2つの期間が毎年固定ではなかったときですね。
その場合は年に1回くらい更新してくださいね!

コメント

タイトルとURLをコピーしました