jCalendar.jsに関して

セレクトボックスと連動型のカレンダーを探していたら、jCalendar.jsというのが見つかったので、
早速使ってみた。
このjCalendar.jsは制約として1ページにつき、1つのカレンダーしか作れないようになっている。
1ページに複数入れたい場合は改造が必要になる。その改造方法に関しては別のエントリーで解説する。

jCalendar.jsのダウンロードはここから可能です。

使い方は以下の通り。

• 1.Jquery.jsをダウンロードしてくる。
  （対応バージョンは一応1.0.4 or 1.1.2と書かれていますが、今回1.4.3を使ってみましたけど、特に問題無かったです。）
• 2.jCalendar.jsとjCalendar.cssを上記サイトのuseタブをクリックしたページの
  「Download jCalendar — source or compressed or svn checkout」
  からダウンロード。
  今回はデザインや挙動を含め、いろいろと変更することが想定されたので、source版をダウンロードしました。
• 3.年月日のセレクトボックスにそれぞれ「jcalendar-select-year」、「jcalendar-select-month」、「jcalendar-select-day」のクラスをつける。
• 4.クラスを付加した年月日のセレクトボックスを<div class="jcalendar-selects">で囲む。
• 5.それをさらに<fieldset class="jcalendar">で囲む。
• 6.Jsで以下のコードを実行。
  

  $(function(){
      $('fieldset.jcalendar').jcalendar();
  });

※注意点
セレクトボックスのvalueで1桁の数字を0詰めしている場合は、カレンダーを操作してもセレクトボックスの値が書き変わらないので、注意が必要。

デフォルト状態での使い方は以上。
一応使用可能状態のHTMLも以下に記述しておく。

<fieldset class="jcalendar">
    <div class="jcalendar-selects">
        <select class="jcalendar-select-year">
            <option value="2011">2011</option>
        </select>
        <select class="jcalendar-select-month">
            <option value="3">3</option>
        </select>
        <select class="jcalendar-select-day">
            <option value="1">1</option>
        </select>
    </div>
</fieldset>