jQueryの導入とdatepicker表示設定

Last-modified: Fri, 19 Sep 2014 00:21:17 JST (1063d)

jQuery導入

  1. Gemfileに以下追記
    gem 'jquery-ui-rails','~>4.2.1'
  2. インストール
    bundle install
  3. /app/assets/javascripts/application.jsを編集
    //= require jquery
    //= require jquery.ui.all    #追記
    //= require jquery_ujs
    //= require twitter/bootstrap
    //= require turbolinks
    //= require_tree .
  4. /app/assets/stylesheets/application.cssを編集
    *= require_tree .
    *= require jquery.ui.datepicker   #追記
    *= require_self

datepicker表示設定

  1. /app/assets/javascripts/hogehoge.coffeeに以下追記
    $ ->
     $(".datepicker").datepicker(
       dateFormat: 'yyyy/mm/dd'
     )
  2. /app/views/hogehoge/_form.html.erbを以下のように編集
    (simple form使用時の例)
    <%= simple_form_for(@hogehoge) do |f| %>
     <%= f.error_notification %>
    
     <div class="form-inputs">
       <%= f.input :start_date,input_html:{class: 'datepicker'} %>
     </div>
    
     <div class="form-actions">
       <%= f.button :submit %>
     </div>
    <% end %>

simple formの指定方法についてはここを参考


Counter: 756, today: 1, yesterday: 1

このページの参照回数は、756です。