jQueryのカレンダー・期間選択のプラグインなど、あれこれ。

こんにちは、taku-workです。
iPhoneのデフォルトのカレンダーアプリで月表示のとき、次の月に移動するには左右の矢印をタップして移動するわけですが、画面的にはカレンダーが上下にスライドするわけです。
これがなんか妙だなぁと思っています。左右に移動すれば良いのに。

ということで、今回はjQueryのカレンダー・期間選択プラグインのおはなし。
いろいろとプラグインが出ているので使い勝手を試してみるのもよいですね。

Date Range Picker

Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework | Filament Group, Inc., Boston, MA
http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework

こちらはいろいろと選択肢のある日付け選択のカレンダーです。
このプラグインでは「先月」などをはじめ、いろいろとプリセットを作成できそうです。

DatePicker

DatePicker - jQuery plugin
http://www.eyecon.ro/datepicker/

こちらも期間指定のカレンダープラグインです。
こちらの面白いのは年の表示への導線でカレンダーのヘッダー部分の月名をクリックすると年の階層に移動するという具合になっています。
長期間をまたぐ月を選ぶ時には開始日または最終日の片方を表示したまま日付けを選択できるのはよさそうです。

selectToUISlider

Update: jQuery UI Slider from a Select Element - now with ARIA Support | Filament Group, Inc., Boston, MA
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support

このプラグインでは横のスライドバーで期間指定をします。
簡単に期間を調整できるのは良さそうです。ただスライドバーと日時選択がイメージ的に結びつかない可能性もあると思うので、カレンダーをつかったUIと表示を切り替えられるようにしておくとよさそうな気がします。

Multiday Calendar Datepicker

overset - Multiday Calendar Datepicker JQuery Plugin
http://www.overset.com/2008/05/12/multiday-calendar-datepicker-jquery-plugin/

こちらは期間をあらかじめ区切っての日時選択が可能です。
4日間ならその分だけカレンダー上でマスが埋まった状態で日時を選択します。
利用される場面は限定的になりそうですが日時選択の行程がぐっと少なくてすみそうです。

ということで

カレンダーの日時指定のUIはどうしたら使い勝手がよくなるのか、サンプルを試しながらいろいろと考えてみるのも楽しいですね。