【コピペOK】日時を指定してリンクをアクティブにする 方法（JS+CSS）

期間限定サイトやイベントの開催日時に合わせてリンクをアクティブにしたい。

または、開催期間が過ぎたらリンクを自動でオフにしたいといった要望を受けたことはありませんか？

それをカレンダーやリマインダーに入れて、当日リンクを繋ぐ作業をしてもいいのですが、その時間に作業できる環境に居なければいけない、なんて不自由すぎますよね💦

そんな問題もJavaScriptを使えば、指定の日時や期間など好きなタイミングでリンクをオン/オフすることができます。

では早速作り方を見ていきましょう。

特定のリンクをオフにする

まず特定のリンクボタンをオフにする方法から見ていきましょう。

HTMLでリンクを用意する

HTMLでリンクボタンを1つ用意します。

<a href="#" class="link_btn">お問い合わせはこちら</a>

今回は JavaScriptからHTMLのclassに新しいclassを追加する仕組みを作りますので、オフにしたいリンクボタンを見分けるためのclassをつけておきましょう。（idを指定してもOKです）

今回は「link_btn」というclassを付けました。

名前はなんでもOKなので分かりやすに名前をつけておきましょう。

CSSでリンクをオフにするクラスを作る

._off {
  pointer-events: none;
  background-color: #d3d3d3 !important;
}

CSSでリンクボタンがオフになるclassを作っておきます。

リンクオフにするCSSについては下記の記事で解説しています。

ここで設定した「._off」というclassが JavaScriptによってリンクボタンのclassに追加されるとリンクボタンがオフになります。

JavaScriptを設定する

window.onload = function () {
  let today = new Date();
  let start = new Date(2024, 1, 1, 0, 0, 0);
  let end = new Date(2024, 1, 24, 19, 0, 0);
  const linkBtn = document.querySelector(".link_btn");
  if (start.getTime() <= today.getTime() && end.getTime() >= today.getTime()) {
    linkBtn.classList.add("_off");
  }
};

最後に JavaScriptでclassを追加するコマンドを書いたら完成です。

今回はページが読み込まれたタイミングで、リンクボタンをオフにしたいので、window.onloadを使います。

let today = new Date();は今日の日時を取得しています。

let start = new Date(2024, 1, 1, 0, 0, 0);はオフにする最初の日時を2024年2月1日0時0分0秒に設定しています。

let end = new Date(2024, 1, 24, 19, 0, 0);はオフにする最後の日時を2024年2月24日19時0分0秒に設定しています。

2月なのにDate()の2024の後が「1」になっているのはなんで？って思いました？

この表記方法だと、月は0から始まるようなのです。

ちょっと分かりずらいなと思われた方は JavaScriptを使った日時の表記方法は他にもたくさんありますので、使いやすい表記方法に変えて記述してみてください。

const linkBtn = document.querySelector(".link_btn");でリンクボタンのHTML要素を取ってきます。

ifを使って、todayがstartとendの間にある時に、classに「._off」を追加するという内容のコマンドを書いていきます。

これで2024年2月1日0時0分0秒から2024年2月24日19時0分0秒の間このリンクボタンはオフになり、クリックもできない状態で、グレーアウトした状態になります。

let end = new Date(2024, 1, 24, 19, 0, 0);の値を変えて、リンクボタンがアクティブになったりオフになったりするか確認してみてください。

うまくいきましたか？

複数のリンクをまとめてオフにする

次に複数のリンクボタンを同じタイミングで、同時にオン/オフを切り替えたい場合の仕組みを作ってみましょう。

HTMLで同じクラスのついたリンクボタンを用意する

<a href="#" class="link_btn">ログイン</a>
<a href="#" class="link_btn">新規登録</a>

同時にオン/オフしたいリンクボタンを用意します。

リンクボタンには同じclassを設定しておきましょう。

JavaScriptを設定する

window.onload = function () {
  let today = new Date();
  let start = new Date(2024, 1, 1, 0, 0, 0);
  let end = new Date(2024, 1, 24, 19, 0, 0);
  const linkBtn = document.querySelectorAll(".link_btn");
  if (start.getTime() <= today.getTime() && end.getTime() >= today.getTime()) {
    linkBtn.forEach((element) => element.classList.add("_off"));
  }
};

const linkBtn = document.querySelectorAll(".link_btn");の、querySelectorがquerySelectorAllに変わっていますね。

これは、「.link_btn」のクラスがついた要素を全部取ってきてねと書いてあります。

その後のifの部分は同じ条件（日時）が設定してあります。

今回のポイントはquerySelectorAllでHTML要素を持ってきているというところです。

querySelectorAllはHTML要素を配列という状態でHTMLから取ってきます。

配列の中の要素にclassを付けるにはlinkBtn.classList.add("_off");だけではうまくいきません。

この場合、forを使って配列の中の要素を取り出してあげる必要があるので、linkBtn.forEach((element) => element.classList.add("_off"));と書いてあげましょう。

forEachでelementの中にlinkBtnを順番に取り出して、classList.addで_offを追加しています。

まとめ

リンクをオフにするclassをCSSで作っておけば、あとはJavaScriptで時間をチェックしてHTML要素にそのclassをつけたり外したりするだけでできてしまうんですね。

事前に作業を済ませて後からリンクを繋げるという依頼が私の場合多かったので、今回の仕組みを作ってみました。

あなたの参考になれば幸いです。