指定日以降になったら表示内容を切り替えるJavascript「xday.js」

指定の日付(もしくは日時)以降になったらHTMLの表示内容を書き換えるjQueryプラグイン、「xday.js」を紹介します。

指定日になったらJavascriptを用いてCSSのdisplayプロパティを切り替えるだけですので、コードを見られてしまうと指定日以前に内容を確認できてしまいます。カジュアルな切り替え機能として利用してみてください。

1.設置方法

(1) コンテンツの用意

指定日前に表示するコンテンツ」と「指定日以降に表示するコンテンツ」をHTMLでコーディングします。指定日前に表示するコンテンツにはクラス名で「xday-before」を、指定日以降に表示するコンテンツにはクラス名で「xday-after」をつけます。

<div class="xday-before">指定日前に表示するコンテンツ</div>
<div class="xday-after">指定日以降に表示するコンテンツ</div>

CSSでxday-afterを非表示にしておきます。

.xday-after {
  display: none;
}

(2) ダウンロード

GitHubのサイトより「xday.js」をダウンロードします。

xday.js on GitHub

xday-github

(3) サイトフォルダに配置

ダウンロードしたフォルダ内にある「xday.js」のみをサイトフォルダ内に配置します。

(4) jQueryとxday.jsの読み込み

jQuery本体とxday.jsをhead内で読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="xday.js"></script>

(5) 日付の指定

上記の記述に続き、<script>タグ内で表示を切り替えたい日付を指定します。
日付の場合には「2016/4/1」のようなフォーマットで、日時の場合には「2016/4/1 12:00」のように記述してください。

<script>
$(function() {
  $('window').xday( '2016/4/1 12:00' );
});
</script>

これで指定の日付になったら「.xday-before」内のコンテンツから「.xday-after」内のコンテンツへ表示が切り替わります。

どうぞお試しください。