datetimepickerをtbs3に対応する

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が表示される。

bootstrap_cal.png (72.3 kB)