我有这个调用 datepicker 的表单:

... 
<%= f.input :expiration_date, as: :datepicker, required: false %> 
... 

Simple_form 包装器:
应用程序/输入/datepicker_input.rb

class DatepickerInput < SimpleForm::Inputs::Base 
  def input 
    @builder.text_field(attribute_name, input_html_options) + \ 
    @builder.hidden_field(attribute_name, { :class => attribute_name.to_s + "-alt"}) 
  end 
end 

当页面从头开始加载时( $(document).ready 事件)，会生成以下 html:

<input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" type="text"> 

但是，当页面加载了 turbolinks(来自侧导航栏，“page:load”事件)时，呈现的 HTML 如下:

<input class="datepicker optional form-control" id="order_expiration_date" name="order[expiration_date]" type="text"> 

当然，我可以简单地在 .html.erb 或 application.js 文件中添加 hasDatepicker 类，但我想知道是否可以使用 Rails 功能来实现它。

请您参考如下方法:

我终于找到了一个合适的解决方法:

应用程序/输入/datepicker_input.rb 保持不变，包装器效果很好。

Assets /javascripts/application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap.js 
//= require_tree . 
 
$(document).on("page:load ready", function(){ 
    $("input.datepicker").datepicker(); 
}); 

由于 :datepicker 输入类型将 ".datepicker"类添加到呈现的 HTML，只需将 datepicker() 绑定(bind)到该类的所有元素就足够了。它用最少的代码就可以解决问题。

指定“input.datepicker”很重要，因为“.datepicker”类同时添加到标签和输入标签中。

turbolinks 抛出一个 page:load 事件，所以我为这两种情况添加了处理程序 - 当页面加载 turbolinks 时，以及从头开始加载时(窗口刷新、保存在收藏夹中的链接等)

现在，以下 .html.erb 已按我的预期呈现:

<%= f.input :expiration_date, as: :datepicker, required: false, 
    :placeholder => 'Select date', input_html: {class: "form-control"}, 
    label: "Expiration date: " %> 

输出:

<div class="control-group datepicker optional order_expiration_date"> 
  <label class="datepicker optional control-label" for="order_expiration_date">Expiration date: </label> 
  <div class="controls"> 
    <input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" placeholder="Select date" type="text"> 
    <input class="expiration_date-alt" id="order_expiration_date" name="order[expiration_date]" type="hidden"> 
  </div> 
</div>