LoginSignup
5
4

More than 5 years have passed since last update.

Bootstrap Datetimepicker でページ遷移するとカレンダーが表示されない

Posted at

インストールとかは省略。
こんな感じで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',
  })
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4