日付の入力は、プルダウンよりもカレンダーから入力したほうが楽です。特に日付に加えて時刻まで入力する場合にはなおさらです。

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 #<:base:0x21045e4>

というエラーがでます。検索して調べてみたところ、同様の問題に対する解決方法として、プラグインでのインストールが推奨されていたので、

% 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 属性を追加します。

以上、日本語化した結果は以下の通り。