日付の入力に「Yahoo! UI Library:Calendar」をつかってみる
開発中のサービスで、日付を入力する必要があります。
日付を入力する方法として、次のようなものが考えられます。
○キーボードから入力する
問題点：日付の入力フォーマットが間違っていると、サービスがうまく動かない。
○プルダウンメニューから入力する
問題点：プルダウンメニューにリストが長くなると、選ぶのが面倒？
○カレンダーからGUI入力する
問題点：1から実装するのは大変。
個人的に、やってみたいのは「カレンダーからGUI入力する」です。
また、ユーザからみても、マウスひとつで直感的に日付を選べるのはうれしいはず。
ということで、今回は「カレンダーからGUI入力する」を採用することにしました。
とはいえ、実装するのは大変そうなので、「Yahoo! UI Library」を利用することにしました。
以下では、簡単な使い方を紹介します。
「Yahoo! UI Library」を利用するためには、「Yahoo! UI Library」のサイトから、ライブラリをダウンロードする必要があります。
ダウンロードしたファイル「yui_2.2.2.zip」を展開して、適当なディレクトリにコピーします。ここでは、js/yui/以下に、yui/build/以下のフォルダをコピーしたとして説明します。
カレンダーを利用するためのコードを、以下に示します。
○「calendar.html」
実行すると、こんな感じになります。
