当サイトはアフィリエイト広告を利用してます

指定日付を過ぎたときの表示を変更するHTMLとJavaScript

HTMLに、指定の年月日時分秒を属性値として設定しておくと、その日時を過ぎたときに表示を変更します。

入力フォーマット

以下のようなフォーマットで指定します。

<span>タグに、class="expires"を付ける
年月日時分秒をyear, month, day, hour, minute, second属性として記述する
指定した日時までは、before属性に記述したテキストを表示
指定した日時を過ぎると、after属性に記述したテキストを表示
指定した日時を過ぎると、classname属性に記述したクラスをHTMLに設定

↓ 2024年1月10日午後6時期限。期限までは『申込受付中』と表示。期限後は『終了』と表示し、クラス『badge text-bg-warning』を付ける。(クラスはbootstrapのものです)

<span class="expires" data-year="2024" data-month="1" data-day="10" data-hour="18" data-minute="0" data-second="0" data-before="申込受付中" data-after="終了" data-classname="badge text-bg-warning"></span>

実行例 →

↓ 2024年3月31日23時59分59秒期限。期限までは『有効』と表示。期限後は『期限切れ』と表示し、クラス『badge text-bg-danger』を付ける。

<span class="expires" data-year="2024" data-month="3" data-day="31" data-hour="23" data-minute="59" data-second="59" data-before="有効" data-after="期限切れ" data-classname="badge text-bg-danger"></span>

実行例 →

期限までは、<span>タグ内に data-before="XXXXX" の XXXXX を表示します。

期限を過ぎたら<span>タグ内にdata-after="YYYYY" の YYYYY を表示し、クラス名をdata-classname="ZZZZZ" の ZZZZZ に置き換えます。

ソースコードは下記です。オープンソース(MITライセンス)で公開しています。

    document.addEventListener("DOMContentLoaded", function () {
        const today = new Date();
        const todaynum = today.getTime();
        let dates = document.querySelectorAll("span.expires");
        dates.forEach((spanage) => {
            let targetdate = new Date(parseInt(spanage.dataset.year), parseInt(spanage.dataset.month) - 1, parseInt(spanage.dataset.day), parseInt(spanage.dataset.hour), parseInt(spanage.dataset.minute), parseInt(spanage.dataset.second));
            const targetdatenum = targetdate.getTime();
            if (todaynum > targetdatenum) {
                spanage.textContent = spanage.dataset.after;
                if (spanage.dataset.classname != '') {
                    spanage.className = spanage.dataset.classname;
                }
            } else {
                spanage.textContent = spanage.dataset.before;
            }
        });
    });

※コードが実行されるには、JavaScriptが有効になっている必要があります。