読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

railsstrapのdatepickerをつかう

rails javascript/node.js

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”
  });

参考もと