Rails 4 + simple_form and jQuery UI. Datepicker is not working via turbolinks

Question

I have this form which calls datepicker:

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

Simple_form wrapper: 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

When the page is loaded from scratch ( $(document).ready event ), the following html is generated:

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

However, when the page is loaded with turbolinks (from side nav bar, "page:load" event), the rendered HTML is the following:

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

Of course, I can simply add hasDatepicker class in .html.erb or in application.js file, but I wonder if it's possible to achieve it with Rails functionality.

Answer 1

I finally found a suitable fix:

app/inputs/datepicker_input.rb is left the same, the wrapper works nice.

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

Since :datepicker input type adds ".datepicker" class to rendered HTML, it's enough just to bind datepicker() to all elements with that class. It does the trick with the least amount of code.

It's important to specify "input.datepicker" since the ".datepicker" class is added both to label and input tags.

turbolinks throws a page:load event, so I've added handler for both cases - when the page loads with turbolinks, and when it loads from scratch (window refresh, link saved in favourites, etc)

Now the following .html.erb is rendered as I expect:

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

output:

<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

The following works for me in simple_form and jquery-ui:

js:

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

form:

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

So without as: :datepicker.

Answer 3

Try this:

<%= 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 should be

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