【jQuery】指定した日時に要素を表示・非表示にする完全ガイド｜期間限定コンテンツ・カウントダウン連動まで

セール告知バナーの期間表示・予約投稿コンテンツの公開・キャンペーン終了後の自動非表示——こうした「特定の日時に応じてコンテンツを切り替える」処理は、jQueryとJavaScriptのDate オブジェクトを組み合わせることで実現できます。

1. 指定した日時に達したかを判定する基本

JavaScriptの Date オブジェクトをミリ秒（UNIX時間）に変換して比較します。現在時刻 ≥ 指定日時なら表示、それ以外は非表示というロジックが基本形です。

$(function () {
  // 表示を開始する日時（例: 2025年8月1日 00:00:00）
  var showAt = new Date('2025-08-01T00:00:00');  // ISO 8601形式を推奨
  var now    = new Date();

  if (now >= showAt) {
    $('#campaign-banner').show();
  } else {
    $('#campaign-banner').hide();
  }
});

2. 開始〜終了の期間中だけ表示する

セールや期間限定キャンペーンでは「開始日時より後かつ終了日時より前」の期間にだけコンテンツを表示します。

<div id="sale-banner" style="display:none;">
  <p>? 夏のセール開催中！全品20%オフ 〜8月31日まで</p>
</div>
<div id="ended-msg" style="display:none;">
  <p>セールは終了しました。またのご利用をお待ちしています。</p>
</div>

$(function () {
  var start = new Date('2025-08-01T00:00:00');  // 開始日時
  var end   = new Date('2025-08-31T23:59:59');  // 終了日時
  var now   = new Date();

  if (now < start) {
    // まだ開始していない
    console.log('セール開始前');

  } else if (now >= start && now <= end) {
    // 期間中
    $('#sale-banner').fadeIn(400);

  } else {
    // 終了済み
    $('#ended-msg').show();
  }
});

3. setIntervalでリアルタイムにチェックする

ページ表示時の一回判定だけでなく、ページを開いたまま日時をまたぐ場合にはsetInterval() で定期的に判定し直す必要があります。

$(function () {
  var showAt  = new Date('2025-08-01T12:00:00');  // 公開日時
  var hideAt  = new Date('2025-08-31T23:59:59');  // 非表示日時

  function checkTime() {
    var now = new Date();

    if (now >= showAt && now <= hideAt) {
      if ($('#content').is(':hidden')) {
        $('#content').fadeIn(600);  // 初めて表示になるときのみアニメーション
      }
    } else {
      if ($('#content').is(':visible')) {
        $('#content').fadeOut(400);
      }
    }
  }

  checkTime();                          // 初回即時チェック
  setInterval(checkTime, 1000);         // 1秒ごとに再チェック
});

4. カウントダウン → 公開切り替えパターン

「あと○時間○分でセール開始」のカウントダウンを表示し、指定日時になったら自動でコンテンツを切り替える実装です。

<div id="countdown-area">
  <p>セール開始まで <span id="countdown">--:--:--</span></p>
</div>
<div id="sale-content" style="display:none;">
  <h2>? セール開始！今すぐチェック</h2>
</div>

$(function () {
  var target = new Date('2025-08-01T10:00:00');

  function pad(n) { return String(n).padStart(2, '0'); }  // 2桁ゼロ埋め

  function update() {
    var now  = new Date();
    var diff = target - now;  // ミリ秒の差

    if (diff <= 0) {
      // 日時を過ぎた → カウントダウン終了・コンテンツ表示
      clearInterval(timer);
      $('#countdown-area').fadeOut(400);
      $('#sale-content').fadeIn(600);
      return;
    }

    // 残り時間を計算
    var h = Math.floor(diff / 3600000);
    var m = Math.floor((diff % 3600000) / 60000);
    var s = Math.floor((diff % 60000) / 1000);

    $('#countdown').text(pad(h) + ':' + pad(m) + ':' + pad(s));
  }

  update();
  var timer = setInterval(update, 1000);
});

5. 複数スケジュールを配列で管理する

複数のバナーや告知を日時でスケジューリングする場合、配列に設定をまとめると管理が楽になります。

$(function () {
  // スケジュール設定（配列で一元管理）
  var schedules = [
    {
      id:    '#banner-summer',
      start: new Date('2025-07-01T00:00:00'),
      end:   new Date('2025-08-31T23:59:59')
    },
    {
      id:    '#banner-autumn',
      start: new Date('2025-09-01T00:00:00'),
      end:   new Date('2025-10-31T23:59:59')
    },
    {
      id:    '#banner-sale',
      start: new Date('2025-08-10T10:00:00'),
      end:   new Date('2025-08-12T23:59:59')
    }
  ];

  function applySchedules() {
    var now = new Date();
    $.each(schedules, function (i, s) {
      var $el = $(s.id);
      if (now >= s.start && now <= s.end) {
        $el.show();
      } else {
        $el.hide();
      }
    });
  }

  applySchedules();
  setInterval(applySchedules, 60000);  // 1分ごとにチェック
});

6. 日付だけで判定する（時刻を問わない）

「〇月〇日から表示」という日付単位の判定では、時刻を00:00:00に統一するか、日付文字列を直接比較する方法が使えます。

$(function () {
  var now    = new Date();

  // 今日の日付を YYYY-MM-DD 形式で取得
  var todayStr = now.toISOString().slice(0, 10);  // 例: '2025-08-01'

  var startStr = '2025-08-01';
  var endStr   = '2025-08-31';

  // 文字列の辞書順比較（ISO形式なら日付の大小比較と一致する）
  if (todayStr >= startStr && todayStr <= endStr) {
    $('#summer-banner').show();
  }

  // 別の方法: 時刻を0時0分0秒にリセットして比較
  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  var start = new Date(2025, 7, 1);   // 月は0始まり（8月 = 7）
  var end   = new Date(2025, 7, 31);

  if (today >= start && today <= end) {
    $('#summer-banner').show();
  }
});

7. タイムゾーンとサーバー時刻のズレへの対処

クライアントサイドのJavaScriptはユーザーの端末時計を参照します。ユーザーが端末の時計を意図的にずらしたり、海外ユーザーが異なるタイムゾーンで閲覧する場合に注意が必要です。

// タイムゾーンを明示して日時を定義（JST = UTC+9）
var startJST = new Date('2025-08-01T00:00:00+09:00');
var endJST   = new Date('2025-08-31T23:59:59+09:00');
var now      = new Date();  // ユーザー端末の現在時刻

// JavaScriptのDateはUTCで比較されるため、タイムゾーン付き文字列で定義すれば
// ユーザーのローカル時刻に関わらず正しく比較できる
if (now >= startJST && now <= endJST) {
  $('#sale-banner').show();
}

// ===== より厳密な実装: AjaxでサーバーのUTC時刻を取得して比較 =====
$.ajax({
  url: '/api/server-time',  // サーバー側でUTC時刻をJSONで返すエンドポイント
  success: function (data) {
    var serverTime = new Date(data.utc);  // 例: { utc: '2025-08-01T01:23:45Z' }
    var start = new Date('2025-08-01T00:00:00+09:00');
    var end   = new Date('2025-08-31T23:59:59+09:00');

    if (serverTime >= start && serverTime <= end) {
      $('#sale-banner').show();
    }
  }
});

まとめ

jQueryで日時に応じた表示切り替えを実装するポイントをまとめます。

関連記事: jQueryでカウントダウンタイマーを実装する方法 / jQueryでランダムに要素を表示する完全ガイド（タイマー活用）

よくある質問（FAQ）