如何使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搜索字段充当日期选择器？

回答

相关问题