【jQuery】日時や期間を指定して、要素の表示と非表示を切り替える2017/04/12

要素の表示・非表示を自動でしてくれる方法を探していたところ、

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利」の記事で方法を紹介されていましたのでご紹介します。

 

-できること-

・指定した日時になったら要素を表示する
・指定した日時になったら要素を非表示にする
・指定した期間だけ要素を表示する

 

■日時や期間を指定して、要素の表示と非表示を切り替える

◆HTMLでのhead内記述(下記3つから1つで実装できます)

・.jQueryライブラリを読み込む場合

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js”></script>

・直接HTML内に記述する場合
<script>
$(document).ready(function() {
$(“.view_timer”).each(function(index, target) {
var startDate = $(this).attr(“data-start-date”);
var endDate = $(this).attr(“data-end-date”);
var nowDate = new Date();

if (startDate) {
startDate = new Date(startDate);
} else {
startDate = nowDate;
}
if (endDate) {
endDate = new Date(endDate);
}

if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
$(this).show();
} else {
$(this).hide();
}
});
});
</script>

・jsファイルとして読み込ませるには下記の記述を「view_timer.js」などjs形式で保存し、<script src=”js/view_timer.js”></script>で読み込ませます。

$(document).ready(function() {

$(“.view_timer”).each(function(index, target) {

var startDate = $(this).attr(“data-start-date”);

var endDate = $(this).attr(“data-end-date”);

var nowDate = new Date();

 

if (startDate) {

startDate = new Date(startDate);

} else {

startDate = nowDate;

}

if (endDate) {

endDate = new Date(endDate);

}

 

if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {

$(this).show();

} else {

$(this).hide();

}

});

});

 

◆日時の指定(年/月/日 時間で記述 記述例:2017/4/11 0:00)

・指定した日時まで表示(2017/4/11 15:00 になると要素が非表示になります )

<span class=”view_timer” data-end-date=”2017/4/11 15:00″></span>

 

・指定した日時まで非表示(2017/4/11 15:00 から要素を表示させるようにします)

<span class=”view_timer” data-start-date=”2017/4/11 15:00″></span>
・指定した期間に要素を表示する(2017/4/11 15:00 ~2017/4/11 15:30を表示期間に指定)

<span class=”view_timer” data-start-date=”2017/4/11 15:00″ data-end-date=”2017/4/11 15:30″></span>

 

その他、詳細な解説は参考サイトをご参照ください。

参考サイト:日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利(2016/02/14)