datetimepickerをtbs3に対応するために以下のgemを利用する。
TrevorS/bootstrap3-datetimepicker-rails · GitHub
利用手順
利用方法は以下の通りとなる。
1.gemをインストールする
gemのインストールは以下の通り行う。
[code lang=ruby] gem 'momentjs-rails', >= 2.9.0' gem 'bootstrap3-datetimepicker-rails', '~> 4.15.35' [/code]
つぎに bundle install を実行します。
[code lang=bash] bundle install [/code]
2.application.scssへの参照を登録する
application.scssに以下の項目を追加する。
[code lang=css] @import 'bootstrap-datetimepicker'; [/code]
3.application.jsへの参照を登録する
application.jsに以下の項目を追加する。
[code lang=javascript] //= require moment //= require bootstrap-datetimepicker [/code]
viewの設定を行う
viewで日付を設定したい項目を以下の通り設定する。
[code lang=html] / == org_user.date_select :ed_contract_period, class:'form-control' == org_user.text_field :ed_contract_period, data: {date_format: 'YYYY/MM/DD'}, class: 'form-control datetimepicker', placeholder: 'YYYY/MM/DD' [/code]
なお、クラスに定義している datetimepicker はjsから参照するために追加しているため適宜変更を行ってもよい。
viewで読み込むjsの設定を行う
viewに対応するjsを作成し、対象となるコントロールにdatetimepickerを読み込むよう設定する。
[code lang=javascript] $(document).on('ready page:load', function(event) { $(".datetimepicker").datetimepicker(); }); [/code]
turbolinksに対応するため、上記の通り通常の $(function(){}); ではない形式で記述します。詳細は下記を参照。
Rails - Turbolinksをオフしないためにやった事 - Qiita
設定後の画面
上記設定後以下の通り画面にdatetimepickerが表示される。