2007年8月10日金曜日

Teedaでカレンダー入力

スズキです。

日付をポップアップカレンダーで入力するためのTipsです。

といっても、JKL.Calendarで日付選択して、その結果を
テキストフィールドに入れて、それをサブミットして、
PageクラスでDateで受けるだけです。

◆JKL.Calendar
日本製のシンプルなカレンダー入力用Javascriptです。
(本家)
http://www.kawa.net/works/js/jkl/calender.html
(機能アップバージョン)
http://blogs.yahoo.co.jp/ti_tap_tgm/44254858.html
今回は機能アップバージョンの方の最新版を利用しています。

使い方はこんな感じです。

...
<script type="text/javascript" src="../../js/lib/calendar.js"></script>
<script>
  var cal = new JKL.Calendar("calid","dateEntryForm","date");
</script>
...
<form id="dateEntryForm">
  <input id="date" type="text" maxlength="10"
    onchange="cal.getFormValue();cal.hide();"/>
  <img src="../../img/lib/calendar/calendar.gif" onclick="cal.write();"/>
  <div id="calid"/>
  <span id="dateMessage"/>
  <input type="submit" id="doUpload" value="登録"/>
</form>
....

ポイントはJKL.Calendarの引数です。渡す値は
第一引数: カレンダーを表示させるdivのid
第二引数: formのid
第三引数: 選択した日付を入れるテキストフィールドのid
となります。

ここで、一筋縄でいかなかったところがあり、何かというと、
JKL.Calendarの第三引数です。
オリジナルではテキストフィールドのname属性の値を入れるのですが、
teedaはそのnameが"_id3:dateEntryForm:date"といった具合に
自動に設定され、さらに"_id3"の数字の部分が再起動すると
変わる可能性があります。

なので、第三引数にnameではなくidの値で機能するように
Javascriptを調整しました。
(idはHTMLに記述したもののまま変わりません)

下記は上記で説明した実際のソース(リソース)です。
▼Javascript(調整後)
http://suz-lab.googlecode.com/svn/trunk/suz-example-teeda/src/main/webapp/js/lib/calendar.js
▼HTML
http://suz-lab.googlecode.com/svn/trunk/suz-example-teeda/src/main/webapp/view/date/dateEntry.html
▼画像(クリックするとカレンダーが表示)
http://suz-lab.googlecode.com/svn/trunk/suz-example-teeda/src/main/webapp/img/lib/calendar/calendar.gif
▼Pageクラス
http://suz-lab.googlecode.com/svn/trunk/suz-example-teeda/src/main/java/jp/co/iret/suz/example/teeda/page/date/DateEntryPage.java

そろそろ、TeedaにJavascriptが絡んできたぞ。

--
blog: http://suz-lab.blogspot.com/

0 コメント: