【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
するのがしっくりこないというかワケわかめになるので・・・。