Together网站搭建之踩坑系列5

这是功能实现的第四篇，扯一扯如何添加时间筛选功能。

完整作品源码及效果，看这里作品网站, 作品源码。

正文：

老规矩，上效果图先：

具体步骤：

这里，我用了 bootstrap-datepicker-rails来作为日期筛选，没有用date_field_tag, 既为了美观，也为了避免出现浏览器支援的问题。

好，开始吧。

安装，在gemfile中加入：
```
gem 'bootstrap-datepicker-rails'
```
终端运行bundle install
编辑app/assets/stylesheets/application.scss，加入：
```
@import "bootstrap-datepicker3";
```

编辑app/assets/javascripts/application.js，加入：

//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN

这里，引入了中文版

在app/views/events/index.html.erb中，加入日期输入框：

......
<div class="submenu">
    <span><i class="fa fa-calendar fa-lg"></i> 时间: </span>
    <div class="form-group" style="margin-left: 80px; margin-top: -20px;">
    <%= form_tag events_path, :method => :get do %>
      <%= text_field_tag :start_on, params[:start_on]%> ~  <%= text_field_tag :end_on, params[:end_on]%>
      <%= submit_tag "确认", :class => "btn btn-default"%>
    <% end %>
    </div>
</div>
.....

在app/views/events/index.html.erb中，将script放在最下面。

<script>
  $("#start_on").datepicker({format: "yyyy-mm-dd"});
  $("#end_on").datepicker({format: "yyyy-mm-dd"});
</script>

这里，start_on, end_on 可以通过查看chrome的inspect，得到id。

另，如果需要指定多语言，可以修改script成这样：

<script>
  $("#start_on").datepicker({format: "yyyy-mm-dd", language: "<%= I18n.locale %>"});
  $("#end_on").datepicker({format: "yyyy-mm-dd", language: "<%= I18n.locale %>"});
</script>

编辑app/controllers/events_controller.rb, 在index部分，加入如下代码：

  def index
    @events = Event.order("created_at DESC")
    ......
    if params[:start_on].present?
      @events = @events.where("start_time >= ?", Date.parse(params[:start_on]).beginning_of_day)
    end

    if params[:end_on].present?
      @events = @events.where("end_time <= ?", Date.parse(params[:end_on]).end_of_day)
    end
    ......
  end

重启rails s, 试一下，可以根据时间筛选啦！

对啦，如果要部署到heroku，记得运行bundle exec rake assets: precompile后再deploy。

目录

正文：