フォームの日付入力支援として、jQueryのDatepickerプラグインを使用してみました。
なんちゃってデザイナー＆コーダーなので、間の理屈はともかくとしてとりあえず実装されればOKなスタンスです。目的は、とにかく見た目問題なく動くこと。筋の通った諸々はまたの機会に。
まずはサイトへアクセス。
jQuery UI Datepicker http://marcgrabanski.com/articles/jquery-ui-datepicker
これを読んで分かる方は適当に読んでもらって、これに従い作業すればきっと完了です。
こちとら英語なんて普段オンラインゲームでしか使わないので、とりあえずnpとかtyとか言っとけば気を悪くはしねえだろってなレベル。なので、当然これを読んでも分からない。そこでいくつかのサイトを参考につぎはぎしてまとめた流れが以下。
カスタマイズ
ThemeRoller http://jqueryui.com/themeroller/
こちらにアクセスすると、jQueryで実装できるUIのCSSカスタマイズをブラウザからまとめて設定できます。まずはここで気の済むまで見た目をいじります。
気が済んだら次はダウンロードです。画面左上のオレンジのボタン[Download Theme]をクリック。
ダウンロードページ
右側のサイドバーでバージョンが選べます。自分が使用するバージョンに応じて選択します。今回は1.7.3(Legacy)を選択しました。以後はそれに準じて説明を進めますが、選択したバージョンに従い、ファイル名等は適宜読み替えてください。
ここではUI全般に対する設定ファイルをまとめて落とせるようですが、今回はとりあえずカレンダーなので、
Core Datepicker
のみにチェックを入れて、右サイドバー最下段にあるDownloadボタンをクリック。すると、jquery-ui-1.7.3.custom.zipがダウンロードできます。これを解凍して、ページ組み込みを。
ファイルの格納
今回実装したサイトの構成は、大雑把に書くとこんな感じ。
[html] ├[css] ├[js] ├[images] └各HTML
上記の前提で話を進めるので、内容はそれぞれの構成に合わせて読み替えてくださいませ。
zipを解凍したフォルダの中から、必要なものを現在のフォルダ構成に合わせてコピーします。
必要ファイルとコピー先は以下の通り。
jquery-ui-1.7.3.custom/css/custom-theme/jquery-ui-1.7.3.custom.css ⇒CSSフォルダへ jquery-ui-1.7.3.custom/js/jquery-1.3.2.min.js jquery-ui-1.7.3.custom/js/jquery-ui-1.7.3.custom.min.js jquery-ui-1.7.3.custom/development-bundle/ui/i18n/ui.datepicker-ja.js ⇒jsフォルダへ jquery-ui-1.7.3.custom/css/custom-theme/images/ui-***.png ⇒imagesフォルダへ
ソースの記述
まずは格納したフォルダの構成に合わせてヘッダで呼び出します。
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script> <script type="text/javascript" src="js/ui.datepicker-ja.js"></script> <link href="css/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
次にカレンダーのスクリプトの実行を行います。これもヘッダでOK
ページのレスポンスなどに配慮するなら、記述の箇所を工夫するとよいかと思います。
$(“#id”)の部分に、カレンダーを関連付けたいinputフィールドのidを入れます。
<script type="text/javascript" charset="utf-8">
jQuery(function($){
$("#id").datepicker();
});
</script>
動かすだけならここまでで完了です。動作確認をしてみてください。
微調整
上記で進めた場合、デフォルトで想定された構成と異なるため、CSSで呼び出している画像が表示されません。なので、jquery-ui-1.7.3.custom.cssの中の、画像のパスを全て、自分の環境に合った適正なものに修正。
また、フォントサイズ指定がemのため、サイトの大本のCSSで定義したフォントサイズが適用されています。それだとドロップダウン的に出るカレンダーとしては大きすぎるような気がするので、ここもちょっと調整。
ダウンロード前のカスタマイズ画面でも調整できるのですが、jQueryのサイトのベースフォントサイズ指定が小さめなので、自分のサイトに配置した場合に、そこでのイメージより大きめに表示されること、多いんではないでしょうか。
あとこれは、いずれ修正されるのかもしれませんが、ui.datepicker-ja.jsを使用した場合、タイトルバーにあたるところの表記から「年」が抜けていますので、現時点では修正の必要があります。エディタで開いて、以下の部分を書き直しましょう。
修正前：
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
↓
修正後
monthNames: ['年1月','年2月','年3月','年4月','年5月','年6月','年7月','年8月','年9月','年10月','年11月','年12月'],
monthNamesShort: ['年1月','年2月','年3月','年4月','年5月','年6月','年7月','年8月','年9月','年10月','年11月','年12月'],
※2010/08/02追記
ちょこっとカスタマイズ
上記の通りで導入すると、カレンダーから取得した日時に曜日が含まれません。
やはり日本で使う場合曜日は重要ですので、なんとか一緒に取得できないかと調べてみたところ、
ui.datepicker-ja.js中の、16行目、dateFormatを書き直せばよさそうです。
例えば現在、
dateFormat: ‘yy/mm/dd’, firstDay: 0,
となっている場合、これを
dateFormat: ‘yy/mm/dd D’, firstDay: 0,
と直します。
すると、例えば今日の日付だと、
2010/08/02 月
と表示されます
曜日フォーマットは、
D：dayNamesShortで設定した曜日表記で表示
DD：dayNamesで設定した曜日表記で表示
と、いうことのようです。
以上、動作確認して完了です。
至極簡単で適当な説明ですが、やることだけを抜粋して書きました。
自分の備忘録的なことも含めて。
これからも何かやってみるたびにメモっていきたいと思います。