ruby on rails 4 - Rails 4+simple_form y jQuery UI. Datepicker no funciona a través de turbolinks

ruby-on-rails-4 jquery-ui-datepicker

Question

Tengo este formulario que llama a datepicker:

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

Envoltorio de 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

Cuando la página se carga desde cero (evento $ (documento) .ready ), se genera el siguiente html:

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

Sin embargo, cuando la página se carga con turbolinks (desde la barra de navegación lateral, evento "página: cargar"), el HTML renderizado es el siguiente:

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

Por supuesto, puedo simplemente agregar la clase hasDatepicker en .html.erb o en el archivo application.js, pero me pregunto si es posible lograrlo con la funcionalidad de Rails.

Answer 1

Finalmente encontré una solución adecuada:

app / inputs / datepicker_input.rb se deja igual, la envoltura funciona bien.

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();
});

Dado que: el tipo de entrada datepicker agrega la clase ".datepicker" al HTML renderizado, es suficiente con unir datepicker () a todos los elementos con esa clase. Hace el truco con la menor cantidad de código.

Es importante especificar "input.datepicker" ya que la clase ".datepicker" se agrega tanto a la etiqueta como a las etiquetas de entrada.

turbolinks lanza una página: evento de carga, por lo que he agregado controlador para ambos casos: cuando la página se carga con turbolinks y cuando se carga desde cero (actualización de ventana, enlace guardado en favoritos, etc.)

Ahora el siguiente .html.erb se representa como espero:

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

salida:

<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

Prueba esto:

<%= 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 debería ser

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

Answer 3

Lo siguiente me funciona en simple_form y jquery-ui :

js:

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

formar:

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

Entonces sin as: :datepicker .