jQuery UI を Rails 4 のプロジェクトに導入する

表題の件について datepicker の導入を例に説明します。

まずは Gemfile を更新。

gem 'jauery-rails'

この下に

gem 'jauery-ui-rails'

を追加します。終わったら bundle install をお忘れなく。

次に app/assets/javascripts/application.js を更新。

// require jquery
// require jquery_ujs

ここを次のように変更。

// require jquery
// require jquery.ui.core
// require jauery.ui.datepicker
// require jquery_ujs

なお、ここでは datepicker を使うのに必要なライブラリを読み込む場合はこれで完了ですが、他のライブラリもすべて読み込む場合は次のように記述してください。

// require jquery
// require jauery.ui.all
// require jquery_ujs

次に app/assets/stylesheets/application.js を更新します。

*= require_self
*= require_tree .

ここに

*= require_self
*= require_tree .
*= require jquery.ui.all

一行追加。ここまで終わったらビューを更新します。一般的な入力フォームでは

<%= f.date_select :act_on %>

このように入力していた箇所を

<%= f.text_field :act_on, class: 'datepicker' %>

通常のテキスト入力を指定し、クラスに datepicker を指定します。

なお、日本語化して使いたい場合は app/assets/javascripts/application.js にさらに一行追加します。

// require jquery
// require jquery.ui.core
// require jauery.ui.datepicker
//= require jquery.ui.datepicker-ja
// require jquery_ujs