JSのdatetimepickerで日付の範囲指定ができなくてハマったポイント

ハマったこと

bootstrap3-datetimepicker-rails　を使うことで、railsでは簡単に日付カレンダーを作成することができる。

test.html.ruby

f.text_field :date, label: true, class: "form-control datetimepicker"

すると、id = test_date(id = モデル名_カラム名)というように、formに独自のidが出来上がる。
ならこのidを指定してjs側でdatetimepickerを操作すればいいのではないか？と思い以下の様に書いた。

test.js

$(function() {
  $("#text_date").datetimepicker({
    minDate: new Date() //今日の日付から選択可
  })
});

しかし、cssは操作できたものの、datetimepickerだけが操作できない。

app/assets/javascripts/application.js

// = require moment
// = require bootstrap-datetimepicker

ここではしっかりとbootstrap3-datetimepicker-rails が読み込まれている。

解決策

formで新しくidを指定し、jsでそのidを操作する

test.html.ruby

f.text_field :date, label: true, class: "form-control", id: "test_datetimepicker"

test.js

$(function() {
  $("#test_datetimepicker").datetimepicker({
    minDate: new Date() //今日の日付から選択可
  })
});

datetimepickerクラスを削除し、新たにidを指定。それをjsで操作したら無事解決しました。

原因はなんだったのか。

datetimepickerクラスを指定してdatetimepickerメソッドでいじってる場所があり、多分そっちの方が読み込まれてしまっているのでは?
と推測してるので、意見いただけると幸いです。。

app/assets/javascripts/datetimepicker.js.coffee

  $('.datetimepicker').datetimepicker({
  ..........