jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。
実装例（サンプル）
日付:
実装例（サンプル）の動作について
「日付:」の右側の、テキスト入力欄をクリックすると、今月のカレンダーが現れる。
カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。
をクリックすると、次月のカレンダーになる。
をクリックすると、前月のカレンダーになる。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.datepicker.js"></script>
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-ui-datepicker' ) . datepicker();
} );
// -->
</script>
HTML
オプション
Datepicker プラグインには、オプションが多く存在する。私が良く使うのは、下のオプション。
- dateFormat
日付のフォーマットを指定するオプション。
- minDate
選択できる日付の範囲を指定するオプション。本日の何日前からか選択できるかを指定。
- maxDate
選択できる日付の範囲を指定するオプション。本日の何日後まで選択できるかを指定。
- altField
カレンダーによる日付の選択を反映させる入力欄を、追加指定するオプション。
- altFormat
altField で追加した入力欄の書式指定オプション。
- showButtonPanel
「今日」ボタンと、「閉じる」ボタンを表示するオプション。
- changeMonth
月のドロップダウンリスト移動を表示するオプション。
- changeYear
年のドロップダウンリスト移動を表示するオプション。
- showOtherMonths
各月の余剰部分に前月・次月の日を表示するオプション。
- selectOtherMonths
各月の余剰部分の前月・次月の日を選択できるようにするオプション。
- showWeek
「週」の列を追加し、その年の何週目かを表示するオプション。
- firstDay
週の最初の曜日を指定するオプション。
- numberOfMonths
カレンダーを複数月分表示するオプション。
- showOn
カレンダーを呼び出すボタンを表示するオプション。
- buttonImage
ボタンに使う画像へのパスを指定するオプション。
- buttonImageOnly
ボタンを画像だけにするオプション。
- showAnim
アニメーション動作でカレンダーを開閉するオプション。
- autoSize
日付のフォーマットに応じて入力欄の大きさを自動変更するオプション。