カレンダーでinputフォームに日付を入力する(datepicker)

最初の例ではただdivタグにカレンダーを表示させただけでした。
これだと入力には使えないのでinputのtextフォームにカレンダー
の選択結果を入力できるようにします。
続きを読む

とりあえずカレンダーを表示させてみる(datepicker)

日付の入力をカレンダーで指定させる方法
(ダウンロード~サンプルスクリプト)

datepickerというライブラリを使うことのより簡単にカレンダーでの
日付入力が実現できます。

datepickerのページは以下になります。

http://jqueryui.com/demos/datepicker/

上記ページに行くとわかると思いますが、datepickerのライブラリは
jquery-uiに含まれており以下のページからダウンロードします。

全部にチェックしてダウンロードしてしまうのが手っ取り早いですが、
datepickerにチェックされていればとりあえずOKです。

jquery-uiは以下のページでダウンロードできます。

http://jqueryui.com/download

ただ、そのままダウンロードするとカレンダーは結構でかくなってしまいます。

カレンダーの大きさはここでダウンロードする時の文字サイズの値で決定します。
この文字のサイズを変更するには、以下のページで文字サイズを変更してから
ダウンロードすればOKです。
“Font Setting”でSizeを9pxくらいにするのがよいでしょう。

http://jqueryui.com/themeroller/

ダウンロードしたファイルを解凍すると以下のような階層構造になってます。
—————
js/
jquery本体
jquery-ui本体

css/custom-theme/
jquery-uiのcssファイル

css/custom-theme/images/
画像群

css/development-buldle/
各コンポーネントごとのcssファイルやjsファイルが入っていると思われる。
必要に応じてここから、取り出しjsやcssに移動してつかうっぽい。
—————

とりあえず、ダウンロードしたプラグインと同じディレクトリに以下のような
スクリプトを書けばカレンダーが表示されます。








$(function(){
    $('.datepicker').datepicker();
});



4行目でダウンロードしたjquery-uiに入っているcssを指定します。
5行目でjquery読み込みます。
6行目でjquery-uiを読み込みます。
7~13行目がスクリプトになります。
9行目で、”datepicker”というIDを持つ要素に対して以下を実行してます。
datepicker({inline:true});
これによりカレンダーが”datepicker”というclassを持つ要素に表示されます。