Ransackの検索フィールドをdatepickerとして動作させる方法は？

Question

フィールドをdatepickerとして機能させるにはどうすればよいですか？どのようにそれらにカレンダーのアイコンを追加するには？私の見解コードの 一部：

Answer 1

私は私の答えを更新しました：

<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> 

私はこのような何かをしようとしています。

あなたはこのスタイルを追加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 %>

つまり、search_fieldではなくdate_fieldを使用します。
@Charanの推奨アイコンを追加できます