読者です 読者をやめる 読者になる 読者になる

Rails3.2とjQuery UIのDatepicker

Ruby on Rails3.2でjQuery UIのDatepickerを使うための手順をメモ。

jQuery UIを読み込む。

  
$ vi app/assets/javascripts/application.js  
//= require jquery  
//= require jquery-ui ←このあたりに追加  
//= require jquery_ujs  

jQuery UIのカスタムCSSをこのあたりから好きなデザインを選んでダウンロードする。

ダウンロードしてきたCSSと画像を配置する場所をつくる。

  
$ mkdir -p app/assets/stylesheets/jquery-ui/  
$ mkdir -p app/assets/images/jquery-ui/  

CSSと画像を配置する。

  
$ cp jquery-ui-1.8.18.custom.css app/assets/stylesheets/jquery-ui/  
$ cp -r images app/assets/images/jquery-ui/  

CSSを読み込む。

  
$ vi app/assets/stylesheets/application.css  
 *= require_self  
 *= require_tree .  
 *= require_tree ./jquery-ui ←このあたりに追加  

Datepickerを呼び出す。
以下は、homeコントローラー配下で使うつもりでの呼び出し。

  
$ vi app/assets/javascripts/home.js.coffee  
$("#datepicker").datepicker()