如何使Ransack搜索字段充當日期選擇器？

我該如何讓我的領域充當日期選擇器？如何將日曆圖標添加到他們？我的視圖代碼部分：如何使Ransack搜索字段充當日期選擇器？

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

我試圖做這樣的事情：

來源

2016-09-21 nobilik

您正在使用哪種字體庫？ –

我更新了我的答案。

假設如果你正在使用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>

希望這有助於:)

來源

2016-09-21 04:37:57

謝謝，但你能看到我的更新。我之前並不清楚，對不起 – nobilik

您使用哪種字體庫來顯示圖標？ –

fontawesome。但這不是主要問題 – nobilik

回答這個有點晚了，但我認爲下面的代碼可能有幫助。
<%= f.date_field :business_date_gteq, class: 'form-control input-sm', 'datepicker' => true %>

即使用date_field而不是search_field。
您可以按照@Charan建議添加圖標

來源

2017-02-20 06:20:27 divyesh

如何使Ransack搜索字段充當日期選擇器？

回答

相關問題