日付入力をクールにやりたい！！

開発者の皆さん、お久しぶりです。僕の街ザグレブではもうワールドカップの話題で持ちきりです。 毎朝メールボックスにジダンに関するジョークやら、Flashで頭突きして倒すゲームやら舞い込んできて 読むだけでも大変です。

今日はDojoライブラリを使った日付入力の方法を紹介したいと思います。
なぜDojoライブラリかと言いますと、商業的に成功しているからです。
スポンサーとしてIBM,Sunがついているのでしばらくはちゃんとバージョンアップを 続けていくと思われます。
企業としてAjaxライブラリを選ぶとなると、それなりに勉強にコストが掛かりますので せっかく１，２週間かけて覚えたライブラリの開発が止まってしまうとそのコストが無駄になってしまいます。
そういう視点でDojoライブラリはお勧めです。もちろん機能設計もちゃんとしていて、簡単に使おうと思えばサックリ使えますし、 ちょっと複雑な場合でも使えるようになっています。

日付入力ですが、みなさんどのように実現していますか？
まさか、これや、ましてや、こんな方法でやっていたりしていないですよね？
Dojoライブラリを使うと、こんなんや、こんなんなのが簡単に出来てしまいます。
もし、現在のプロジェクトで古い方法でやっている場合は、今日説明するソースをコピって 綺麗でクールなカレンダーを実現してしまいましょう。
もちろん綺麗でクールなだけでなく、この方法でやればめんどくさい値の検証のコードを書く必要がありません。 お客さんだけでなくプログラマーも、デバッガーもみんなハッピーです（笑）

まずやらなければならない事は関連ライブラリの読み込みです。

<-- ライブラリの読み込み --> <script type="text/javascript" src="../../dojo/dojo.js"></script> <script type="text/javascript">        dojo.require("dojo.widget.html.DatePicker");        dojo.require("dojo.widget.DropdownDatePicker"); </script> <-- ライブラリの読み込み -->
Dojoライブラリの読み込みはまず、メインのライブラリdojo.jsを読み込んでから 使用するライブラリを読み込みます。

んで、カレンダーを表示するには

普通のカレンダーの場合：
<-- カレンダーを表示 --> <div dojoType="datepicker" widgetId="datePicker1" dateFormat="%Y年%m月%d日" date="2006/06/29"></div> <-- カレンダーを表示 -->
ドロップダウンカレンダーの場合：
<-- カレンダーを表示 --> <div dojoType="dropdowndatepicker" id="datePicker1" dateFormat="%Y/%m/%d" date="2006/06/29"></div> <-- カレンダーを表示 -->
このタグを書くだけです。これでカレンダーが表示されます。簡単でしょ？
まぁでもカレンダーを表示しただけでは意味がありません。これだとただのDivタグなので「保存」ボタンを 押した際に他のフォームのデータと一緒にサーバーに送らなければなりませんよね？
なので、値を取得する必要があります。
値を取得するには

普通のカレンダーの場合：
//日付を取得 function getDatePickerValue(){ var datePicker = dojo.widget.byId('datePicker1'); alert(datePicker.toRfcDate()); }
ドロップダウンカレンダーの場合：
//日付を取得 function getDatePickerValue(){ var datePicker = dojo.widget.byId('datePicker1'); alert(datePicker.inputNode.value); }
とやります。
まぁここまで出来れば大体OKなのですが、複雑なページを作っている場合、 ユーザーが値を選択した瞬間になにかアクションを行いたい場合もあります。
（SelectボックスのOnselectみたいな感じですね）そのために、Dojoライブラリは ウィジェットのイベントに対応する関数を関連付ける仕組みが用意されています。

まずやる事は、HTMLの最後の最後に以下の文を追加します。
<-- 初期化 --> <script type="text/javascript"> dojo.addOnLoad(init); </script> <-- 初期化 -->
dojo.addOnLoadメソッドはDojoがすべてのウィジェットを読み込んだ際に呼ばれます。 Body.Onloadでは、Dojoのウィジェットがまだ生成されておらず、普通のDivタグなので イベントを関連付ける事ができません。

そしてinit関数の中で日付を選んだ時のイベントと呼び出す関数を関連付けます。 //選択時のイベントを登録 function init(){ dojo.event.connect(dojo.widget.byId('datePicker1'),"onSetDate",setDate); }

どうですか？簡単でしょ？
前述しましたが、ここに動くサンプルを置いてあるので参考にしてください。
http://www.yasue.us/samplecodes/alternative/2/calendar_dropdowndatepicker.html
http://www.yasue.us/samplecodes/alternative/2/calendar_datepicker.html

ではでは、次回はこれと同じ内容を全部動的に作る方法を書きます。

＃なにか分からない事があれば、気軽にコメントで聞いてくださいね。