Calendar Date Select Pluginの使い方

prototype.jsを使ったDateTime入力用プラグイン"Calendar Date Select Plugin":http://code.google.com/p/calendardateselect/ の使い方を簡単に解説します。

インストール

通常のプラグインと同様に、次のようにコマンドを入力してインストールします。

ruby script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select

ファイルのインクルード指定

アプリケーションのlayoutのヘッダー部に、次のようにインクルードのための指定を行います。

<%= javascript_include_tag :defaults %>
<%= calendar_date_select_includes %>

Calendar Date Selectだけのためであれば、

javascript_include_tag 'prototype'

でもよいでしょう。

また、calendar_date_select_includesの引数として、’red’　’blue’ ’silver’のいずれかを渡すこともできます。

ビューの中の指定

基本形

<%= calendar_date_select_tag “order”, “order_date” %>

基本的な引数は＜オブジェクト名＞,＜メソッド名＞です。

オプション

:time => true

日付だけでなく時間も入力します。

:year_range => 30

年の選択できる範囲を前後の年数で指定します。

このほかに:enbeddedがあるとされていますが、うまく動きませんでした。

表示形式の変更

英語式の表記から、"2007-08-17 9:30 PM" のような形式にするには、config/environment.rbの最後に次のような指定をします。

CalendarDateSelect.format = :hyphen_ampm

<バグ情報>
:hyphen_ampm指定をした場合、既存のデータの編集時にポップアップボタンが機能しませんでした。これは、calendar_date_select_format_hyphen_ampm.jsファイルにデバッグ用と思われる行が入っているためのようです。下記の行を見つけて削除したら機能するようになりました。

console.log(d);

ローカライズ

表示をローカライズするには、layoutのヘッダ部に、次のような指定を行います。

<script type="text/javascript">
  _translations = {
    "OK": "OK",
    "Now": "現在",
    "Today": "今日"
  }

  Date.weekdays = $w("日 月 火 水 木 金 土");

  Date.months = $w("1 2 3 4 5 6 7 8 9 10 11 12" );

</script>

ただし、上記のように指定した場合、:hyphen_ampmの指定が必要です。

いたさんのブログ

Calendar Date Select Pluginの使い方