Edited at

ブラウザ側で日時指定で表示・非表示を切り替えるスクリプト

More than 5 years have passed since last update.

某所より要望があったので作りました。


ソースと使い方

ソースです。jQueryは別途用意してください。

$(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();
}
});
});

htmlではこんな感じで要素に対してclassとdata-start-date, data-end-date属性を設定すると

<span class="view_timer" data-start-date="2013/9/24 10:00" data-end-date="2013/9/30 21:00">HogeHogeFugaFuga</span>

data-start-date〜data-end-dateの期間だけ表示されるようになります。

上記の例だと2013年9月24日 AM10時〜2013年9月30日 PM9時まで表示されるようになります。

<span class="view_timer" data-start-date="2013/9/24 10:00">テスト</span>

上記のようにdata-start-dateだけ指定するとdata-start-dateで指定された日時から無期限に表示されるようになります。

また、反対に下記のようにdata-end-dateだけ指定すると

<span class="view_timer" data-end-date="2013/9/30 21:00">お試し</span>

単純にdata-end-dateで指定された日時以降は表示しないようになります。


長所


  • jQueryだけで実装してるので静的なHTMLでも使える!


短所


  • HTMLのソースを覗かれたら丸見え!!