ホームページを更新します。
app\controllers\pages_controller.rb
class PagesController < ApplicationController def home @rooms = Room.where(active: true).limit(3) end def search end end
app\views\pages\home.html.erb
<br/> <br/> <%= form_for root_path, method: :get do %> <div class="row"> <div class="col-md-6"> <%= text_field_tag :search, params[:search], placeholder: "どちらのお部屋をおさがしですか?", class: "form-control" %> </div> <div class="col-md-3"> <%= text_field_tag :start_date, params[:start_date], placeholder: "チェックイン", readonly: true, class: "form-control datepicker" %> </div> <div class="col-md-3"> <%= text_field_tag :end_date, params[:end_date], placeholder: "チェックアウト", readonly: true, class: "form-control datepicker" %> </div> </div> <br/><br/> <div class="row"> <div class="col-md-offset-4 col-md-4"> <%= submit_tag "検索", class: "btn btn-normal btn-block" %> </div> </div> <% end %> <br/><hr/><br/> <!-- ホーム --> <div><h3>お部屋</h3></div> <br/> <div class="row"> <% @rooms.each do |room| %> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading preview"> <%= image_tag room.cover_photo(:medium) %> </div> <div class="panel-body"> <%= link_to room.listing_name, room %> </div> </div> </div> <% end %> </div> <script> $('#start_date').datepicker({ dateFormat: 'dd-mm-yy', minDate: 0, maxDate: '3m', onSelect: function(selected) { $('#end_date').datepicker("option", "minDate", selected); $('#end_date').attr("disabled", false); } }); $('#end_date').datepicker({ dateFormat: 'dd-mm-yy', minDate: 0, maxDate: '3m', onSelect: function(selected) { $('#start_date').datepicker("option", "maxDate", selected); } }); </script>
ブラウザ確認
http://localhost:3000/