インストールとかは省略。
こんな感じでBootstrap Datetimepickerを実装します。
assets/javascript/bootstrap.js.coffee
$(".datetimepicker").datetimepicker({
format: 'YYYY年MM月DD日',
locale: 'ja',
})
viewの方からは以下のように
hoge.html.slim
.form-group
#datetimepicker.input-group.date.datetimepicker
input.form-control[type="text"]
span.input-group-addon
span.glyphicon.glyphicon-calendar
そのままだとちゃんとカレンダーのアイコンをクリックするとニョキッとカレンダーが現れます。
んがしかし!ページ遷移をするとなぜだかリロードしないとカレンダーが表示されないんです。
調べてみると、これはRailsのTurbolinksのせいらしい。必要なとこだけ描画するので、jsとかいちいちリロードしない。
参考:[RailsでjQueryが動かないと思ったら]
このためにTurbolinksを外すわけにもいかないし…。
で、どうすればいいかというと、coffeescriptに
「$(document).on 'ready page:load', -> 」を付加してやる。これだけ。
StackOverflowにあったこの方法。
[datepicker does not display the calendar]
assets/javascript/bootstrap.js.coffee
$(document).on 'ready page:load', -> $(".datetimepicker").datetimepicker({
format: 'YYYY年MM月DD日',
locale: 'ja',
})