外部サイトの情報を読み込む【再考】 #fb | Home | イメージスライダーとかティッカーに使えるBXSLIDERが割りといいかも #fb
2012/07/20 0:42 | 印刷

えっと、わざわざブログにするまでも無い事なんですが、個人的にすごいと思ったので。

java scriptで日付の比較をするのが思いのほか、簡単でした。

$(document).ready(function() {
     //今日の日付を指定
     var today = new Date();
     //Xdayを指定 とりあえず松本ぼんぼんにしてみた
     var xDay = new Date(2012/8/4);
     if(today > xDay){
          $('#meg').html('ぼんぼんまでは踊りの練習をかかさない');
     }else{
          $('#meg').html('ぼんぼんが終わったよ');
     }
});

dataオブジェクトにしておけば、「<」で比較できる様です。

DEMO

今日と松本ぼんぼんの日付(8月4日)を比較して8月4日以前は「ぼんぼんまでは踊りの練習をかかさない」と表示されるはずです。

当たり前と言えば当たり前ですが、この方法を知るまでは、「日」だけ抽出して比較するか?なんて、小難しいことを考えていたので、簡単にできて拍子抜けしてます。

あと、jQueryのeach()を使うと、複数の日付群の中から、「今日」を基準に前後で表示方法を変えるなんてこともできたりします。

HTML

<ul class="date">
<li><span>2012/7/1</span> 湘南ベルマーレ戦</li>
<li><span>2012/7/8</span> 東京ヴェルディ</li>
<li><span>2012/7/15</span> ヴァンフォーレ甲府</li>
<li><span>2012/7/22</span> ファジアーノ岡山</li>
<li><span>2012/7/29</span> モンテディオ山形</li>
</ul>

java script

$(document).ready(function() {
     //今日の日付を指定
     var today = new Date();
         
     $('.date li').each(function() {
          //spanの中に含まれる日付をdateオプジェクトに変換
          var gameDate = new Date($(this).children('span').html());

          if(today > gameDate){
               $(this).addClass('fin')
          }

     });
});

html側の日付を拾って、dataオブジェクトに変換して「今日」と比較して、「今日」より後であったら、.finというクラスを付与するようにしています。

DEMO

今日よりも過去の情報は打ち消し線や文字色がついているはずです。

こんな感じで、dataオブジェクトを利用すると、簡単なスケジュール管理アプリみたいなものも作れそうです。通常のwebサイトでは実用性はあまりありませんが、こういった事も知っておくといざという時に重宝するかもしれませんね。

偶然気づいたのですが、上の例にあるnew Date(2012/8/4);が、カッコ内で割り算になって、意図した動作をしていない気がします。
new Date()は本日の日付だけでなく現在時刻まで取得されますから、本事例の場合、もしxDayがtodayと同じ日付である場合に思ったような振る舞いをしてくれないと思いますが。

コメント追加

タイトル
名前
E-mail
Webサイト
本文
情報保存 する  しない
  • 情報保存をすると次回からお名前等を入力する手間が省けます。
  • E-mailは公開されません - このエントリーの新規コメント通知が必要なら記入します。