【Ruby on Rails】jQuery UI Datepikerを使う

Udemyの講座をやっているんですが

https://www.udemy.com/ruby-on-rails-4-a-test-driven-approach/#/lecture/2310254

こんな感じでフォームにフォーカスが当たるとデイトピッカーがでてくるのを実装しようかと。

Gemfile

gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'

application.css

/*

*= require_self
*= require_tree .

*/

custom.css.scss

@import "jquery-ui/core";
@import "jquery-ui/theme";
@import "jquery-ui/datepicker";
@import "bootstrap";
@import "bootstrap-sprockets";
@import "rails_bootstrap_forms";

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require bootstrap-sprockets
//= require_tree .
//= require turbolinks

Develper Toolsでフォームを調べると、idがbook_published_atとなっているので、それを指定します。

assets/javascripts/books.js

$(document).ready(function() {
  $('#book_published_at').datepicker({ dateFormat: 'yy-mm-dd' });
});

application.html.erb

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

特にturbolinksは無効にしてないです。

---

ポイントとしては

@import "jquery-ui/core";
@import "jquery-ui/theme";
@import "jquery-ui/datepicker";

datepickerだけではなくて、core,themeを入れました。
そうでないと半透明？みたいな感じになっちゃった（多分スタイルが効いてない状態かな）。

あとは講座内では

application.css

*= require_self
*= require jquery-ui/datepicker
*= require bootstrap
*= require rails_bootstrap_forms
*= require_tree .

としています。自分はわざわざcustom.css.scssなるものを作り、そこで@importしているのですけど、こういうやりかたってどうなんですなねえ？
どうもapplication.cssでいろいろrequireするのがしっくりこないというかワケわかめになるので・・・。