【jQuery/JS】時間帯・曜日・期間で表示を切り替える完全ガイド｜営業時間・挨拶・セール期間・リアルタイム更新・タイムゾーンまで

「営業時間中のみチャットボタンを表示したい」「時間帯に合わせて挨拶を変えたい」「期間限定セールバナーを自動で出し分けたい」――こうした時間帯による表示制御は、JavaScriptの Date オブジェクトだけで実現できます。この記事では基本的な時刻取得から営業時間制御・分単位精密判定・リアルタイム更新・タイムゾーン固定・祝日対応まで実践的なコードで解説します。

Date オブジェクトで時刻・曜日・日付を取得する

var now = new Date();

var hour   = now.getHours();    // 0〜23（時）
var minute = now.getMinutes();  // 0〜59（分）
var second = now.getSeconds();  // 0〜59（秒）
var day    = now.getDay();      // 0=日曜, 1=月曜, ..., 6=土曜
var date   = now.getDate();     // 1〜31（日）
var month  = now.getMonth();    // 0=1月, ..., 11=12月（0始まりに注意）
var year   = now.getFullYear(); // 西暦（例: 2025）

console.log(hour + ":" + String(minute).padStart(2, "0")); // 例: "9:05"
console.log("月は " + (month + 1) + "月"); // 表示用は +1 する

時間帯によってコンテンツを切り替える基本

<!-- 時間帯ごとに表示する要素（最初は全て非表示にしておく） -->
<div id="msg-morning"  style="display:none">おはようございます！</div>
<div id="msg-afternoon" style="display:none">こんにちは！</div>
<div id="msg-evening"  style="display:none">こんばんは！</div>

$(function () {
  var hour = new Date().getHours();

  if (hour >= 5 && hour < 12) {
    $("#msg-morning").show();
  } else if (hour >= 12 && hour < 18) {
    $("#msg-afternoon").show();
  } else {
    $("#msg-evening").show();
  }
});

営業時間中のみボタン・バナーを表示する

平日 10:00〜18:00 のみチャットボタンを表示し、それ以外は「受付時間外」メッセージに切り替える例です。

<div id="chat-open"   style="display:none">
  <a href="/contact/" class="btn-chat">チャットで相談する（受付中）</a>
</div>
<div id="chat-closed" style="display:none">
  <p>現在の受付時間外です（平日 10:00〜18:00）</p>
</div>

$(function () {
  var now  = new Date();
  var hour = now.getHours();
  var day  = now.getDay(); // 0=日, 1〜5=平日, 6=土

  var isWeekday      = day >= 1 && day <= 5;
  var isBusinessHour = hour >= 10 && hour < 18;

  if (isWeekday && isBusinessHour) {
    $("#chat-open").show();
  } else {
    $("#chat-closed").show();
  }
});

分単位の精密な時間帯制御（例: 10:30〜12:30）

時間と分を組み合わせた判定には、時刻を「分単位の数値」に変換する方法が便利です。

$(function () {
  var now    = new Date();
  var hour   = now.getHours();
  var minute = now.getMinutes();

  // 時刻を「分単位の数値」に変換して比較
  var currentTime = hour * 60 + minute; // 例: 10:30 → 630

  var SESSION1_START = 10 * 60 + 30; // 10:30 → 630
  var SESSION1_END   = 12 * 60 + 30; // 12:30 → 750
  var SESSION2_START = 14 * 60;      // 14:00 → 840
  var SESSION2_END   = 17 * 60;      // 17:00 → 1020

  if (currentTime >= SESSION1_START && currentTime < SESSION1_END) {
    $("#session-morning").show();
  } else if (currentTime >= SESSION2_START && currentTime < SESSION2_END) {
    $("#session-afternoon").show();
  } else {
    $("#session-closed").show();
  }
});

挨拶テキストを時間帯で自動変更する

$(function () {
  var hour = new Date().getHours();
  var greetingMap = [
    { from: 5,  to: 12, text: "おはようございます" },
    { from: 12, to: 17, text: "こんにちは"         },
    { from: 17, to: 21, text: "こんばんは"         },
    { from: 21, to: 24, text: "おやすみなさい"     },
    { from: 0,  to: 5,  text: "夜更かしですね"     }
  ];

  var greeting = "こんにちは"; // デフォルト
  for (var i = 0; i < greetingMap.length; i++) {
    var g = greetingMap[i];
    if (hour >= g.from && hour < g.to) {
      greeting = g.text;
      break;
    }
  }
  // text() でXSS安全に設定
  $("#greeting").text(greeting + "！");
});

setInterval でリアルタイムに状態を更新する

ページ読み込み時だけでなく、一定間隔で現在時刻を再チェックして表示をリアルタイムに更新できます。「残り時間カウントダウン」や「現在時刻の表示」などに使います。

// 現在時刻をリアルタイム表示する
function updateClock() {
  var now    = new Date();
  var h      = String(now.getHours()).padStart(2, "0");
  var m      = String(now.getMinutes()).padStart(2, "0");
  var s      = String(now.getSeconds()).padStart(2, "0");
  $("#clock").text(h + ":" + m + ":" + s);
}

// 営業時間の状態を毎分チェックして更新する
function checkBusinessHour() {
  var now  = new Date();
  var hour = now.getHours();
  var day  = now.getDay();
  var open = day >= 1 && day <= 5 && hour >= 10 && hour < 18;
  $("#status").text(open ? "受付中" : "受付時間外");
  $("#status").toggleClass("is-open", open).toggleClass("is-closed", !open);
}

$(function () {
  updateClock();
  checkBusinessHour();

  setInterval(updateClock, 1000);        // 毎秒: 時計を更新
  setInterval(checkBusinessHour, 60000); // 毎分: 営業状態を更新
});

期間限定コンテンツ・セールバナーの自動表示

$(function () {
  var now   = new Date();
  // セール期間: 2025年12月24日 0:00 〜 2025年12月26日 23:59:59
  var start = new Date("2025-12-24T00:00:00");
  var end   = new Date("2025-12-26T23:59:59");

  if (now >= start && now <= end) {
    $("#sale-banner").show();
  } else {
    $("#sale-banner").hide();
  }

  // 期間前・期間中・期間後で3パターン切り替え
  if (now < start) {
    $("#pre-sale").show();  // 告知
  } else if (now <= end) {
    $("#on-sale").show();   // 開催中
  } else {
    $("#post-sale").show(); // 終了
  }
});

タイムゾーン対応（日本時間に固定する）

new Date() はユーザーの端末のローカル時刻を返します。海外ユーザーが多いサイトで「日本時間9:00〜18:00のみ受付」のような条件を実装する場合はIntl.DateTimeFormat または toLocaleString() でタイムゾーンを指定します。

// 日本時間（JST: UTC+9）に固定する方法
function getJSTDate() {
  var now = new Date();
  // en-US フォーマットで Asia/Tokyo タイムゾーンの時刻文字列を取得し再パース
  return new Date(now.toLocaleString("en-US", { timeZone: "Asia/Tokyo" }));
}

$(function () {
  var jst  = getJSTDate();
  var hour = jst.getHours();
  var day  = jst.getDay();

  // 以降は jst.getHours() などで日本時間を使う
  if (day >= 1 && day <= 5 && hour >= 9 && hour < 18) {
    console.log("日本時間で営業時間内");
  }
});

body にクラスを付与してCSSで一括スタイル変更する

時間帯に応じて body にクラスを付与すると、CSS側で子孫セレクターを使って複数箇所のスタイルを一括で変更できます。ヘッダー・ボタン・背景など多くの要素に時間帯スタイルを適用したい場合に有効です。

$(function () {
  var hour = new Date().getHours();

  if (hour >= 5 && hour < 12) {
    $("body").addClass("is-morning");
  } else if (hour >= 12 && hour < 18) {
    $("body").addClass("is-daytime");
  } else {
    $("body").addClass("is-night");
  }
});

/* CSSで時間帯ごとにスタイルを一括変更 */
.is-morning .site-header { background: #fff7ed; }
.is-night   .site-header { background: #1a1a2e; color: #fff; }

.is-night .hero-banner   { display: none; }   /* 夜は非表示 */
.is-morning .sale-banner { display: block; }  /* 朝だけ表示 */

時間帯処理パターンの比較

まとめ

JavaScriptの Date オブジェクトで時間帯・曜日・期間を制御するポイントをまとめます。

• 時刻: new Date().getHours()（0〜23）
• 曜日: new Date().getDay()（0=日〜6=土）
• 分単位精密制御: hour * 60 + minute で整数変換して比較
• リアルタイム更新: setInterval で毎秒・毎分チェック
• 期間判定: Date インスタンスを >= <= で比較
• 日本時間固定: toLocaleString("en-US", { timeZone: "Asia/Tokyo" })
• 多箇所スタイル変更: body クラス + CSS 子孫セレクターが保守しやすい

関連記事: 指定した時間に要素を表示・非表示にする完全ガイド / 一定時間後にポップアップを表示する完全ガイド / 日付フィールドにスラッシュを自動挿入する完全ガイド

よくある質問（FAQ）