jQuery を使ってみよう---datepicker編 - 氷川 XOOPS Module 開発室

これまた XCL の目玉機能、jQuery のハンドリングについてご紹介いたします。
XCL2.2 では、最もメジャーな Javascript ライブラリの一つ、jQuery, jQuery UI の両ライブラリを自動的に読み込みますので、これらの機能を利用することが出来ます。
また、Javascriptのライブラリ、スクリプト、CSS を内に追加するための機構も追加になっており、今までよりも楽に処理することができます。

今回は、モジュールでよく使われる Datepicker、日付を選択するための小さなカレンダを追加する手順をご紹介いたします。
こういうやつです。

といっても、やることは非常に簡単で、

スクリプトを扱うための Legacy_HeaderScript オブジェクトを取得
Legacy_HeaderScript::addScript() で datepicker 用のスクリプトを追加
テンプレートで、日付選択用カレンダを表示したいインプットフィールドに所定のクラスを設定する。

です。日付選択用カレンダは jQuery UI に含まれていますので、追加のライブラリなどは必要ありません。楽ですね。

あとは、日付を unixtime でテーブルに保存している場合は、unixtime ←→ 日付用のフォーマット（yyyy-mm-dd）　の相互変換が必要になります。

では順番に見ていきましょう。

スクリプトを扱うための Legacy_HeaderScript オブジェクト($headerScript)を取得

$headerScript = XCube_Root::getSingleton()->mContext->getAttribute('headerScript');

Legacy_HeaderScript::addScript() で datepicker 用のスクリプトを追加

$headerScript->addScript('$(".datepicker").each(function(){$(this).datepicker({dateFormat: "'._JSDATEPICKSTRING.'"});});');

ここでは、cssのクラス名は、.datepicker としています。好きなクラス名に変更可能です。IDでも構いません（IDの場合は each などいらなくなりますが）。

テンプレートで、日付選択用カレンダを表示したいインプットフィールドに所定のクラスを設定する。

<{xoops_input type=text name=reg_unixtime class=datepicker value=$reg_date}>

クラスに datepicker を指定します（前項でクラス名の指定を変えていたらそれにあわせます）。ちなみに、Smarty 関数プラグインの xoops_input を使わない、html の場合は以下のようになります。

<input type="text" name="reg_unixtime" class="datepicker" value="<{$reg_date}>" />

なお、$reg_date には、2010-04-12 のような、yyyy-mm-dd 形式の値を入れておいてください。html のインプットフィールドでこの日付形式を使うことは、_JSDATEPICKSTRING で指定しています（この定数の中身は'yy-mm-dd'になっています（modules/legacy/language/english/setting.php）。なお、ここでの yy は jQuery UI での年４桁を表す表記です）。

簡単すぎて jQuery の扱い方を十分見ることができませんでしたね ^^;;

Legacy_ScriptHeader については、
http://sourceforge.net/apps/mediawiki/xoopscube/index.php?title=Legacy_JavaScript;ja
も参照ください。