日付の入力は、プルダウンよりもカレンダーから入力したほうが楽です。特に日付に加えて時刻まで入力する場合にはなおさらです。
calendar_date_select はそのカレンダー入力を可能にする Rails プラグイン。prototype.js ベース、Javascript で書かれたカレンダーピッカーと連動します。
» calendardateselect - Google Code
ただ、日本語環境で使用するには多少手を入れることが必要です。その手順も含め、Rails 2.3 での導入方法を記しておきます。
追記
calendar_date_select プラグインを fork し、以下延々と書き記した追加点を含めておきました。せっかちな方は、
% script/plugin install git://github.com/champierre/calendar_date_select.git
で calendar_date_select + Japanese support プラグインをインストールし、README_JA の指示に従ってください。
» champierre's calendar_date_select at master - GitHub
インストール
まず本家ページの説明どおり、gem でのインストールを試みて使用してみようとしたところ、
undefined method `calendar_date_select_tag' for #
というエラーがでます。検索して調べてみたところ、同様の問題に対する解決方法として、プラグインでのインストールが推奨されていたので、
% script/plugin install git://github.com/timcharper/calendar_date_select.git
でインストールします。
layout ファイルに、
<%= javascript_include_tag :defaults %>
<%= calendar_date_select_includes "red" %>
カレンダーを表示したい部分には、
<% form_for(@model) do |f| %>
で囲っている場合には
<%= f.calendar_date_select "date_and_time", :time => true, :popup => :force %>
そうでない場合には、
<%= calendar_date_select_tag "model[date_and_time]", Time.now, :time => true, :popup => :force %>
といったように記述することで、以下のようなカレンダー入力が可能となります。
カレンダーアイコンをクリックすればカレンダーがテキストフィールドの下に開きます。
各オプションの役割を知るには、CalendarDateSelect Demoを参考にするとよいでしょう。テキストフィールド内の自由入力を許してしまうと、日付フォーマットのチェックが必要になってしまうので、これを禁止してしまう :popup => :force をつけるのがおすすめです。
さて、これでひとまず動作はするのですが、このままだと日付のフォーマットやインターフェースが英語のままで具合が悪いです。順に日本語化していきます。
表示の日本語化
public/javascripts/calendar_date_select/locale 以下に ja.js というファイルを新規作成し、以下をそのままコピー & ペーストします。
次に、layout ファイル内の記述を
<%= javascript_include_tag :defaults %>
<%= calendar_date_select_includes "red", :locale => 'ja' %>
のように変更、:locale => 'ja' を付け足しています。
これで曜日などの表示が日本語化されるはずです。
日付フォーマットの日本語化
2009/01/31 13:30 のような YYYY/mm/dd HH:MM というフォーマットを日本式とみなします。
別の形式を使いたい場合には、以下の説明を適当に読み替えてください。
public/javascripts/calendar_date_select 以下に format_japanese.js というファイルを新規作成し、以下をそのままコピー & ペーストします。
次に、config/environments.rb に以下を追記します。
以上で日付のフォーマットも変更できました。
微調整をいくつか
カレンダー内の時刻のプルダウンとそれに続く 現在 | OK | 閉じる のメニューの一行が長くなってしまって、レイアウトが乱れてしまいます。
そこでこれを修正するため、public/javascripts/calendar_date_select/calendar_date_select.js の 220 行目に br タグを挿入する処理を追加します。
次に、細かい話なのですが、IE などのブラウザでカレンダーアイコンにカーソルをあてると、「Calendar」とツールチップに表示されます。これを「カレンダーから入力」という日本語表示に変更します。
vendor/plugins/calendar_date_select/lib/calendar_date_select/form_helpers.rb の 202 行目に alt 属性を追加します。
以上、日本語化した結果は以下の通り。