如何使Ransack搜索字段充当datepicker？

Question

如何让我的字段充当datepicker？如何向他们添加日历图标？ 我的观看代码的一部分：

 <div class="row">
          <%=  f.label 'Create At' %>
          <%= f.search_field :created_at_beginning_of_day_gteq, class: 'form-control input-sm', 'datepicker' => true %>
          <%= f.search_field :created_at_end_of_day_lt, class: 'form-control input-sm',  'datepicker' => true %>
  </div>

我试图做这样的事情：

Answer 1

我更新了我的答案。

假设您正在使用FontAwesome

<div class="row">
    # You can change your label like this
    <%=  f.label 'Create At' %>
    <%= f.search_field :created_at_beginning_of_day_gteq, class: 'form-control input-sm', 'datepicker' => true %>
    <span class="fa fa fa-calendar calender-span"></span>

    <%= f.search_field :created_at_end_of_day_lt, class: 'form-control input-sm',  'datepicker' => true %>
    <span class="fa fa fa-calendar calender-span"></span>
</div>

添加此样式：

<style>
   .calender-span {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: red;
   }

</style>

希望这会有所帮助：）

Answer 2

稍微回答这个问题，但我认为以下代码可能有所帮助 <%= f.date_field :business_date_gteq, class: 'form-control input-sm', 'datepicker' => true %>

即。使用date_field而不是search_field。
您可以按照@Charan

的建议添加图标