とりあえずカレンダーを表示させてみる(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を持つ要素に表示されます。

とりあえずカレンダーを表示させてみる(datepicker)” への2件のコメント

  1. 通りすがりさんありがとうございます。
    たしかに、idではなくclass属性でした!
    修正させていただきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>