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

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

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

datepickerのページは以下になります。
http://jqueryui.com/demos/datepicker/

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

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

jquery-uiは以下のページでダウンロードできます。
http://jqueryui.com/download

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

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

ThemeRoller | jQuery UI

jQueryUIisacuratedsetofuserinterfaceinteractions,effects,widgets,andthemesbuiltontopofthejQueryJavaScriptLibrary.Whetheryou'rebuildinghighlyinteractivewebapplic...

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

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

css/custom-theme/images/
画像群

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

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

<title>calendar</title>




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



<div class="datepicker"></div>

<title>calendar</title>

$(function(){

$('.datepicker').datepicker();

});

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