Question

我有这个调用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 event）时，会生成以下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 保持不变，包装效果很好。

<强>资产/ Javascript角/ application.js中

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.js
//= require_tree .

$(document).on("page:load ready", function(){
    $("input.datepicker").datepicker();
});

因为：datepicker输入类型添加＆＃34; .datepicker＆＃34;要呈现HTML的类，只需将datepicker（）绑定到该类的所有元素即可。它使用最少量的代码来完成这项工作。

指定＆＃34; input.datepicker＆＃34;非常重要。因为＆＃34; .datepicker＆＃34; class被添加到标签和输入标签中。

turbolinks抛出一个页面：加载事件，所以我为这两种情况添加了处理程序 - 当页面加载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

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

3 个答案: