0

我正在努力添加一个f.input简单的代码行来添加带有组件的引导日期选择器。

按照日期选择器示例，我可以使用以下代码添加带有组件的引导日期选择器：

<div class="input-append date" id="datepicker" data-date-format="dd-mm-yyyy">
   <input class="span2" size="16" type="text" value="12-02-2013" readonly>
   <span class="add-on"><i class="icon-th"></i></span>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $('[data-behaviour~=datepicker]').datepicker();
  })
</script

如何将上面的 div 重写为f.inputsimple_form 代码行

4

2 回答 2

0

application.js 或任何 .js 文件

$(function() {
    $(".datepicker" ).datepicker({dateFormat: "dd/mm/yyyy"});
 });

查看文件

<div class="input-append date">
   <%=f.text_field :field_name, :class=>'datepicker'%>
   <span class="add-on"><i class="icon-th"></i></span>
</div>
于 2013-09-05T09:20:11.420 回答
0

对于我的项目，我使用了这个：https ://github.com/Nerian/bootstrap-datepicker-rails 。

这是一个很好的宝石，易于使用

在我的项目中，我在app/inputs/date_time.input.rb中创建了一个date_time_input.rb文件，用于覆盖简单的表单日期时间输入。

class DateTimeInput < SimpleForm::Inputs::DateTimeInput
  def input
    #template.content_tag(:div, super)
    "#{@builder.text_field(attribute_name, input_html_options)}".html_safe
  end
end

进入视图：

= f.input :date, :required => true, :input_html => { “data-behaviour” => “datepicker” }

和 JS：

$(document).ready(function(){
  $(document).on(“focus”, “[data-behaviour~=’datepicker’]”, function(e){
    $(this).datepicker({“format”: “dd/mm/yyyy”, “weekStart”: 1, “autoclose”: true});
    });
});

这是我用法语写的文章：-D

http://blog.jumboweb.fr/post/42841191962/datepicker-bootstrap-simple-form-avec-rails

于 2013-09-05T09:44:58.703 回答