使用简单形式引导 datepicker 组件答案

【问题标题】：bootstrap datapicker component using simple form使用简单形式引导 datepicker 组件
【发布时间】：2013-09-05 09:14:12
【问题描述】：

我正在努力添加 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.input simple_form 代码行

【问题讨论】：

标签： ruby-on-rails ruby twitter-bootstrap datepicker simple-form

【解决方案1】：

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>

【讨论】：

您好，感谢您的更新，我正在使用的代码正在运行，但我正在研究如何将我重写为一个简单的表单 f.input 命令

【解决方案2】：

对于我的项目，我使用了这个：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

【讨论】：

嗨，我也在使用这个 gem，我想要做的是将我的 div 重写为一个简单的表单 f.input 代码行