【JavaScript】指定した日時で要素の表示・非表示を切り替える方法

HTMLファイルの更新のみで要素の表示・非表示を制御
- 実装コード
使用方法
動作しないときに確認すること
- data-show・data-hideで指定する日付文字列について

JavaScriptで指定した日時で要素の表示・非表示を切り替える方法を解説します。

以下の記事で、JavaScriptの更新のみでバナーの表示切替を行う方法解説しましたが、今回はHTML側の日時更新のみで要素の表示切替を行う方法を解説します。

あわせて読む

: 【JavaScript】期間を指定してバナーの切り替え・表示・非表示を制御する方法
もくじJavaScriptファイルの更新のみでバナーの切り替え・表示・非表示を制御実装コード使用方法１．バナーを表示させたいページにHTMLコンテナを設置する２．バナーを表示させたいページにCSSを追 ...

HTMLファイルの更新のみで要素の表示・非表示を制御

各HTMLファイルに、CSS、JavaScriptファイルを設置することで、要素の表示切替を制御することが可能です。

実装コード

以下のコードは時間制限のある表示制御が必要な場面で便利です。

HTML

Copy

<div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-18T12:00:00" data-hide="2024-09-20T12:00:00">サンプル1</div>
<div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-15T10:00:00" data-hide="2024-09-16T18:00:00">サンプル2</div>

CSS

Copy

.dateTimeSwitching {
display: none;
}

JavaSctipt

Copy

(function () {
// 全ての js-date-time-switching クラスを持つ要素を取得
const jsDateTimeSwitching = document.querySelectorAll('.js-date-time-switching');
// 日付の妥当性を確認する関数
function isValidDate(date) {
return date instanceof Date && !isNaN(date);
}
// 要素ごとに表示・非表示を制御する
function updateDateTimeSwitchingVisibility() {
const now = new Date(); // 現在の日時を取得
jsDateTimeSwitching.forEach(element => {
// データ属性から表示/非表示の日時を取得
const showDateAttr = element.getAttribute('data-show');
const hideDateAttr = element.getAttribute('data-hide');
// 日時を変換
const showDate = showDateAttr ? new Date(showDateAttr) : null;
const hideDate = hideDateAttr ? new Date(hideDateAttr) : null;
// 日時の妥当性を確認
const isShowDateValid = !showDate || isValidDate(showDate);
const isHideDateValid = !hideDate || isValidDate(hideDate);
// 日時が無効であれば非表示に設定
if (!isShowDateValid || !isHideDateValid) {
return; // 無効な要素はスキップ
}
// 現在の日時との比較
let shouldDisplay = true; // デフォルトでは表示
if (showDate && now < showDate) {
// `data-show` が存在し、現在日時が指定日時より前なら非表示
shouldDisplay = false;
}
if (hideDate && now > hideDate) {
// `data-hide` が存在し、現在日時が指定日時を過ぎていれば非表示
shouldDisplay = false;
}
// 表示・非表示を制御
element.style.display = shouldDisplay ? 'block' : 'none';
});
}
// 初期状態で実行
updateDateTimeSwitchingVisibility();
// 1秒ごとにチェックして更新
setInterval(updateDateTimeSwitchingVisibility, 1000);
})();

使用方法

１．HTMLを設置する

data-showとdata-hideというカスタム属性があり、表示/非表示にしたい日時を設定します。

日付はYYYY-MM-DDTHH:MM:SS形式で設定する必要があります。

data-show: この日付・時刻から表示を開始する

data-hide: この日付・時刻で表示を終了する

２．CSSを設置する

初期状態では、dateTimeSwitchingクラスを持つ要素をdisplay: none;にして、JavaScriptで条件に基づいて表示されるように設定します。

３．JavaScriptを設置する

JavaScriptで、HTMLのカスタム属性で指定した日時に応じて要素の表示/非表示を制御します。

data-showやdata-hideのいずれかに無効な文字列がある場合、その要素は無視されます（非表示のまま）。

data-showが設定されていない場合、表示の開始時刻に制限がないため、その要素は現在の時刻に関係なく「即時に表示」されます。

data-hideが設定されていない場合、その要素は「ずっと表示」されます。

両方の属性がない場合、その要素は常に表示されることになります。

以下のようなHTML構造の要素があった場合、表示の制御は以下のようになります。

HTML

Copy

<div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-18T12:00:00" data-hide="2024-09-20T12:00:00">
要素1: 指定日時になると表示されます
</div>
<div class="dateTimeSwitching js-date-time-switching" data-hide="invalid date">
要素2: 無効な日付が設定されているため表示されません
</div>
<div class="dateTimeSwitching js-date-time-switching" data-show="2024-09-21T09:00:00">
要素3: 指定日時に表示されますが、終了タイミングはありません
</div>
<div class="dateTimeSwitching js-date-time-switching" style="display: none;">
要素4: 常に表示されます
</div>

要素1: 2024-09-18T12:00:00 から 2024-09-20T12:00:00 まで表示。
要素2: data-hide に無効な日付が設定されているため表示されません。
要素3: 2024-09-21T09:00:00 以降、非表示になるタイミングがなく永続的に表示。
要素4: 常に表示される。