日付コントロールを変える

前回、「scaffoldした際に、引数で指定される各フィールドの型によって自動的に決まるwebのコントロールを、自分の都合の良いように変えてみたい」と思い、scaffoldのコードを見てみました。

その後よく考えてみると、field_typeによってコントロールを表示するメソッドがあるのだから、それ自体を上書きすればよいことに気がつきました。これだとscaffoldするかどうかは関係なく、既存のプロジェクトにも使えます。

ということで、今回は日付コントロールをカスタマイズしてみます。

scaffoldの引数に「date」というsql_typeを指定すると、new/editでは以下のようなコントロールが表示されます。

これを、jQuery UI Datepickerに変えてみます。

scaffoldによって生成されたnew.html.rbで、このコントロールを表示するためのコードは以下になります。

  <p>
    <%= f.label :atdate %><br />
    <%= f.date_select :atdate %>
  </p>

「f.date_select」を上書きすれば良いことがわかります。上書きする手段はいくつかあると思いますが、今回はそれ用のプラグインを作成しました。(今回はYADS[=Yet Another DateSelect]という名前のプラグインにしています)

vendor/plugins/yads/lib/yads.rb

module ActionView
  module Helpers
    module DateHelper
      def date_select(object_name, method, options = {}, html_options = { })
        options[:size] ||= 12
        html = InstanceTag.new(object_name, method, self, options.delete(:object)).to_input_field_tag("text", options)
        js = <<EOS
                                                                               
<script>                                               
 $('##{object_name}_#{method}').datepicker({dateFormat: 'yy-mm-dd'});  
</script>                                                                      
EOS
        html.concat(js)
      end
    end  
  end  
end

date_selectメソッドではドロップダウンリストが表示されるのですが、それをテキストボックスを表示するように変更しています。datepickerの表示はjavascriptの部分だけです。
javascriptの埋め込みは大分強引ですが、取り合えずということで。

今回はjQueryUIを使う為、datepickerを含むスクリプトを予めダウンロードしておき、スクリプトとスタイルシートを読み込むように設定しておきます。

  <%= stylesheet_link_tag 'scaffold', 'jquery/ui-lightness/jquery-ui-1.7.2.custom.css' %>
  <script type="text/javascript" src="/javascripts/jquery/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="/javascripts/jquery/jquery-ui-1.7.2.custom.min.js"></script>

あとは、config/environment.rbの最後で、

require 'yads'

として作ったスクリプトを読むようにし、サーバを起動します。

日付の入力がドロップダウンリストからテキストボックスへと変わり、テキストボックスをクリックするとdatepickerが表示されます。

config/environment.rbでrequireしているのがイマイチなので、時間があれば自動的にロードさせられないか調べてみます。