Rails 5 jQuery datepicker

I’m embarking on another Rails project and of course there’s been a version bump that I’m going to have to get used to; hopefully I can still remember some of the old stuff.

One of the requirements for the front page is a date selector and since I’ve used a bit of jQuery before…

But this is Rails and life is never that simple.

It starts easily enough and a quick search leads to http://www.rubydoc.info/gems/jquery-ui-rails/5.0.5 which suggests adding a gem, a line in application.js and application.css and Bob’s your uncle.

What the page fails to mention is that taken at face value it doesn’t work. And it doesn’t give an example of how it might be used in a Rails template. There is a note on the page about steps required for certain versions, but it’s not clear that this is actually for current works not old versions.

It turns out that just including ‘gem jquery-ui-rails’ will install version 6 and this isn’t good. What we really need is

gem 'jquery-ui-rails', '5.0.5'

And then, application.js gets the following,

//= require jquery-ui/datepicker

And application.css is treated with,

*= require jquery-ui/datepicker

And with slight trepidation, some CoffeeScript (I fail to see the point of a language to write languages; this isn’t assembler),

jQuery ->
 $('#datepicker').datepicker();

And swapping the date_select helper in the form template with,

<%= f.text_field :due_date, :id => "datepicker" %>

And it works! It’s the “, ‘5.0.5’ that makes the difference.

References

http://stackoverflow.com/questions/15727660/rails-jquery-ui-datepicker – for help with the general approach.

http://stackoverflow.com/questions/42495010/couldnt-find-file-jquery-ui-datepicker-with-type-application-javascript – this page is in response to the displayed by following the default instructions and references the easily-missed version warning.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s