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