ruby-on-rails-4 – Rails 4 simple_form和jQuery UI. Datepicke

发布时间：2020-12-16 21:35:25 所属栏目：百科来源：网络整理

导读：我有这个表单调用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_na

我有这个表单调用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功能来实现它.

解决方法

我终于找到了一个合适的修复：

app / inputs / datepicker_input.rb保持不变,包装效果很好.

资产/ Java脚本/ 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抛出一个页面：加载事件,所以我已经为这两种情况添加了处理程序 – 当页面加载了turbolinks,并从零开始加载(窗口刷新,链接保存在收藏夹等)

现在以下.html.erb按照我的预期呈现：

<%= f.input :expiration_date,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!