simple_form と bootstrap-datepicker-rails を一緒に使う

こんなやつです。Bootstrap 2 系での話ですが、3 系でも大体同じ感じでできるんじゃないでしょうか。Font Awesome も 3 系です。

まず bootstrap-datepicker-rails の README を読みながら assets を追加します。言語ファイルは使うやつだけ読んだ方がいいでしょう。

そしてフィールドを追加。simple_form の append wrapper を使って、カレンダーアイコンをつけます。クラス名は datepicker でなくても良いですが、JS で使うのと一緒にしましょう。

= simple_form_for @model, html: { class: 'form-horizontal' } do |f|
  = f.input name, wrapper: :append do
    = f.input_field name, as: :string, class: 'datepicker'
    %span.add-on
      %i.icon-calendar

何個も使うなら helper にしても便利です。

app/helpers/application_helper.rb

def datepicker(form, name)
  form.input name, wrapper: :append do
    form.input_field(name, as: :string, class: 'datepicker') +
    content_tag('span', class: 'add-on') do
      content_tag 'i', '', class: 'icon-calendar'
    end
  end
end

次は JS です。普通にやるとカレンダーアイコンをクリックした時に datepicker が出てこないので、親に date というクラスをつけて、親に datepicker を適用します。date というクラス名は Bootstrap Datepicker の仕様なので、変えられないようです。なお、日付のフォーマットは好みです。

app/assets/bootstrap.js.coffee

$.fn.datepicker.dates.ja.format = 'yyyy-mm-dd'
$('.datepicker')
  .parent('.input-append')
  .addClass('date')
  .datepicker
    language: 'ja'