僕は発展途上技術者

日付のカレンダー入力を可能にする calendar_date_select プラグイン

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


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 %>


といったように記述することで、以下のようなカレンダー入力が可能となります。


calendar.png


カレンダーアイコンをクリックすればカレンダーがテキストフィールドの下に開きます。


calendar2.png


各オプションの役割を知るには、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 属性を追加します。



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


calendar3.png


プロフィール

株式会社まちクエスト代表、つくる社LLC代表。

Scratchで楽しく学ぶ アート&サイエンスRaspberry Piではじめる どきどきプログラミングを書きました。

Amazonから図書館検索 Libron、iPhoneアプリ ひらがなゲーム かなぶん を作っています。

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ