Rails 4 + simple_form 和 jQuery UI。 Datepicker 无法通过 turbolinks 工作

Question

我有一个调用 datepicker 的表单：

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

Simple_form 包装器： app/inputs/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 功能来实现。

Answer 1

我终于找到了合适的解决方法：

app/inputs/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() 绑定到具有该类的所有元素就足够了。它用最少的代码就可以解决问题。

指定“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>

Answer 2

以下在simple_form 和jquery-ui 中对我有用：

js:

$('input#date_field').datepicker();

表格：

<%= f.text_field :expiration_date, :placeholder => 'Select Date' %>

所以没有as: :datepicker。

Answer 3

试试这个：

<%= f.text_field :expiration_date, as: :datepicker, :placeholder => 'Select Expiration Date' %>

Javascript

 $(document).ready(function() {
    $('#order_expiration_date').datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-70:-18'
    });
  });

app/assets/javascript/application.js应该是

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.all
//= require turbolinks