jQueryの導入とdatepicker表示設定

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の指定方法についてはここを参考

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