jQueryプラグイン：jCalendar 日付選択カレンダー

概要

jCalendarは、カレンダーから日付を選択して、セレクトボックスに日付をセットするjQueryプラグインです。

ダウンロード

jQuery: http://jquery.com/ から「jQuery.js」をダウンロードします。
jcalendar: http://tedserbinski.com/jcalendar/index.html から「jcalendar.js」と「jcalendar.css」をダウンロードします。

使い方

まずは<head>タグ内にスクリプトを読み込み、カレンダーを出力するフォームを指定します。

<script type="text/javascript" src="../js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../js/jcalendar.js"></script>
<link href="../css/jcalendar.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(document).ready(function() {
  $('#form-id').jcalendar();
});
</script>

次に、カレンダーを出力するフォームのIDに上記で指定したIDを記載します。
```
<form  action="" method="post" name="form-id" id="form-id">
```

最後にカレンダーを出力します。年・月・日の３つのセレクトボックスを<div>で囲み、クラス名を class="jcalendar-selects" とします。

<div class="jcalendar-selects">
  <select id="year" class="jcalendar-select-year" name="year">
    <option value="年 選択">年選択</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
  </select>年
  <select id="month" class="jcalendar-select-month" name="month">
    <option value="月 選択">月選択</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </select>月
  <select id="day" class="jcalendar-select-day" name="day">
    <option value="日 選択">日選択</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
・・・省略・・・
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select>日
</div>

jCalendar 日付選択カレンダーサンプル

投稿日：2009年01月25日

概要

ダウンロード

使い方

jCalendar 日付選択カレンダー サンプル

jCalendar 日付選択カレンダーサンプル