Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

railsstrapのdatepickerをつかう

railsstrapはtwitter-bootstrapをヨロシク使う以外にも、色々便利な拡張がついてきます。
今回はその一つ「datepicker」について扱います。

実際のところ

これまで、泥臭くdate_fieldとcss芸で対処していた所を、date pickerで実装し直すケースを考えます。

下準備

Gemfile
 gem 'railsstrap'

 # 以下を追加
 gem 'momentjs-rails', '>= 2.9.0'
 gem 'bootstrap3-datetimepicker-rails', '~> 4.14.30'
$ bundle install

実装

/app/assets/javascripts/application.js
//= require moment
//= require bootstrap-datetimepicker
/app/assets/stylesheets/bootstrap_and_overrides.css.less
@import "datepicker/datepicker";
view
= date_field :fund, :end_date

から、以下のように書き換え

#datetimepicker_fnd_end.input-group.date
      span.input-group-addon.glyphicon.glyphicon-calendar
      input.fund_end_date name="fund[end_date]" type="date" /

ファイル末尾になり、別のファイルなりに
datepickerのスクリプトを追記します。

  $(function () {
  $('#datetimepicker_fnd_bgn').datetimepicker({format: "YYYY-MM-DD", defaultDate: "2016-03-03”
  });

  $(function () {
  $('#datetimepicker_fnd_end').datetimepicker({format: "YYYY-MM-DD", defaultDate: "2016-03-03”
  });

参考もと