【JavaScript】特定の日時を過ぎたら要素を非表示にする方法｜期間内表示・data属性で一括管理・タイムゾーン対応・完成形クラスまで解説

// 非表示にしたい期限（日本時間で指定）
const EXPIRE_DATE = new Date('2026-06-30T23:59:59+09:00');

const banner = document.getElementById('campaign-banner');

if (new Date() > EXPIRE_DATE) {
  // 期限切れ → 非表示
  banner.hidden = true;
} else {
  // 期限内 → 表示
  banner.hidden = false;
}

<!-- hidden 属性を最初から付けておく（JSが無効でも表示されない） -->
<div id="campaign-banner" hidden>
  <p>夏のビッグセール開催中！</p>
</div>

const EXPIRE_DATE = new Date('2026-06-30T23:59:59+09:00');
const banner = document.getElementById('campaign-banner');

// 期限内なら表示（hidden を外す）
if (new Date() <= EXPIRE_DATE) {
  banner.hidden = false;
}
// 期限切れのときは何もしない（hidden のまま）

const START_DATE  = new Date('2026-07-01T00:00:00+09:00'); // 表示開始
const EXPIRE_DATE = new Date('2026-08-31T23:59:59+09:00'); // 表示終了

/**
 * 要素を期間に応じて表示/非表示にする
 * @param {Element} el         - 対象要素
 * @param {Date}    start      - 表示開始日時
 * @param {Date}    end        - 表示終了日時
 */
function applySchedule(el, start, end) {
  const now = new Date();
  const isActive = now >= start && now <= end;
  el.hidden = !isActive;
}

applySchedule(
  document.getElementById('summer-campaign'),
  START_DATE,
  EXPIRE_DATE,
);

// NG: タイムゾーン不明（実行環境のローカル時刻として解釈される）
const bad1 = new Date('2026-08-31 23:59:59'); // 環境依存

// NG: 日付のみの形式はUTC 00:00:00 として解釈される（JST = UTC+9 なので9時間ずれる）
const bad2 = new Date('2026-08-31'); // UTC 0:00 = JST 9:00 になる

// OK: +09:00 を明示することで日本標準時と確定する
const good = new Date('2026-08-31T23:59:59+09:00');

// OK: UTC で指定（JST 23:59 = UTC 14:59）
const utc  = new Date('2026-08-31T14:59:59Z');

console.log(good.getTime() === utc.getTime()); // true（同じ瞬間）

<!-- data-show-from / data-show-until に ISO 8601 形式で日時を書く -->
<div class="scheduled"
     data-show-from="2026-07-01T00:00:00+09:00"
     data-show-until="2026-08-31T23:59:59+09:00">
  夏のキャンペーンバナー
</div>

<div class="scheduled"
     data-show-until="2026-09-30T23:59:59+09:00">
  秋の新作フェア（開始日時なし＝即時表示）
</div>

<div class="scheduled"
     data-show-from="2026-10-01T00:00:00+09:00">
  冬の予告（終了日時なし＝無期限表示）
</div>

function applyAllSchedules() {
  const now = new Date();

  document.querySelectorAll('.scheduled').forEach(el => {
    const fromStr  = el.dataset.showFrom;
    const untilStr = el.dataset.showUntil;

    const from  = fromStr  ? new Date(fromStr)  : null;
    const until = untilStr ? new Date(untilStr) : null;

    const afterStart  = !from  || now >= from;   // 開始日時前でなければOK
    const beforeEnd   = !until || now <= until;  // 終了日時後でなければOK

    el.hidden = !(afterStart && beforeEnd);
  });
}

// ページ読み込み時に即時実行
applyAllSchedules();

// ページ読み込み時に即時実行
applyAllSchedules();

// その後は1分ごとに再チェック（ミリ秒単位: 60 * 1000 = 60000）
const intervalId = setInterval(() => {
  applyAllSchedules();

  // 全要素が期限切れになったらタイマーを止める
  const hasActive = [...document.querySelectorAll('.scheduled')]
    .some(el => !el.hidden);
  if (!hasActive) {
    clearInterval(intervalId);
  }
}, 60_000); // 1分おき

.scheduled {
  transition: opacity 0.5s ease;
}

.scheduled.is-hidden {
  opacity: 0;
  pointer-events: none;  /* クリックも無効化 */
}

/* 完全に非表示にするときは transition 終了後に hidden を付ける */

/**
 * フェードアウトして非表示にする
 * @param {Element} el
 * @param {number}  durationMs - トランジション時間（CSS と合わせる）
 */
function fadeHide(el, durationMs = 500) {
  el.classList.add('is-hidden');
  // トランジション完了後に hidden 属性を付ける
  setTimeout(() => {
    el.hidden = true;
    el.classList.remove('is-hidden'); // 次回表示時のために除去
  }, durationMs);
}

// 使用例
const EXPIRE_DATE = new Date('2026-06-30T23:59:59+09:00');
const banner = document.getElementById('campaign-banner');

if (new Date() > EXPIRE_DATE) {
  fadeHide(banner);
}

class ScheduledDisplay {
  #intervalId = null;
  #selector;
  #checkIntervalMs;

  /**
   * @param {string} selector        - 対象要素のCSSセレクタ
   * @param {number} checkIntervalMs - 定期チェックの間隔（ms）。0で無効
   */
  constructor(selector = '.scheduled', checkIntervalMs = 60_000) {
    this.#selector = selector;
    this.#checkIntervalMs = checkIntervalMs;

    this.#apply();

    if (checkIntervalMs > 0) {
      this.#startInterval();
      document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
          this.#stopInterval();
        } else {
          this.#apply();
          this.#startInterval();
        }
      });
    }
  }

  #apply() {
    const now = new Date();
    document.querySelectorAll(this.#selector).forEach(el => {
      const from  = el.dataset.showFrom  ? new Date(el.dataset.showFrom)  : null;
      const until = el.dataset.showUntil ? new Date(el.dataset.showUntil) : null;
      const active = (!from || now >= from) && (!until || now <= until);
      el.hidden = !active;
    });
  }

  #startInterval() {
    if (this.#intervalId) return;
    this.#intervalId = setInterval(() => this.#apply(), this.#checkIntervalMs);
  }

  #stopInterval() {
    clearInterval(this.#intervalId);
    this.#intervalId = null;
  }

  /** タイマーを破棄する */
  destroy() {
    this.#stopInterval();
  }
}

// 使用例
document.addEventListener('DOMContentLoaded', () => {
  new ScheduledDisplay('.scheduled', 60_000); // 1分おきに再チェック
});