How do I connect jQuery Datepicker to my Ruby on Rails form?

Question

I'm trying to use the jQuery Datepicker to set a date field in my Ruby on Rails form, but I can't work out how to do it. Can someone point me in the right direction?

Answer 1

I've built a gem to handle this:

https://github.com/albertopq/jquery_datepicker

Hope it helps somebody else.

Answer 2

Ryan Bates has a really great explanation of all of this:

http://railscasts.com/episodes/213-calendars (older version you can watch for free) http://railscasts.com/episodes/213-calendars-revised (revised version you need a subscription to watch)

Answer 3

As of now, I'd recommend jquery-ui-rails gem above the other answers for the simple reason you can include only the datepicker assets without the entire jquery ui library!

https://github.com/joliss/jquery-ui-rails

Answer 4

Update for Rails 5.x

Step 1. Install the jquery-ui-rails gem

# gemfile
gem 'jquery-ui-rails'

# app/assets/javascripts/application.js
//= require jquery-ui/widgets/datepicker

# app/assets/stylesheets/application.css
*= require jquery-ui/datepicker

Step 2. Assuming you have a resource called Event with a date or datetime field called :start, then in the form make the :start field a text field.

# app/views/events/_form.html.erb
<%= f.label :start, 'Start Date' %>
<%= f.text_field :start %>

Step 3. Add Javascript (in CoffeeScript syntax here). Line1) If you have Turbolinks enabled (Turbolinks speeds up Rails page loads when you click on a link by loading it with AJAX) you need to add a wrapper or the JavaScript function won't load when you navigate to the page from an internal link.

Line2) You are targeting the element id in your form. Rails automatically assigns an id to the form input by combining the Model name and field name.

Line3) You need to set the dateFormat because jQuery-UI and Rails use different default date formats.

# app/assets/javascripts/event.coffee
$(document).on 'turbolinks:load', ->
  $('#event_start').datepicker
    dateFormat: 'yy-mm-dd'

For Rails 4 everything is the same except the first line in the JavaScript (or CoffeeScript) file. The wrapper to load the JavaScript when Turbolinks is enabled in Rails 4 is:

$(document).on "page:change", ->

Answer 5

I used albertopq's jquery_datepicker that albertopq mentions and it works with regular forms, nested attributes, etc. It made things very easy for me. jquery_datepicker also correctly passes options to datepicker's necessary javascript calls.

Here's an example from one of my nested forms:

<%= f.datepicker 'availability', :minDate => 0, :maxDate => "+8Y", :tab_index => autotab %>

minDate and maxDate are passed to datepicker and tab_index is put into the text field html. (autotab is just my form helper to advance the tab + 1...better for me than hardcoding it).

Answer 6

It may be a bit late but I use a simple gem :

Gemfile: gem 'jquery-ui-rails'

Application.js: //= require jquery-ui

Application.css *= require jquery-ui

And then: Bundle install

Source : https://github.com/joliss/jquery-ui-rails

Answer 7

If using Rails 3.0+, you shouldn't need to do anything other than include jQuery and jQuery UI because jQuery is the default JavaScript framework.

If using Rails earlier than 3.0 or using Prototype (or something else), you'll need to use jQuery in noConflict mode. Make sure you include jQuery after Prototype (your other framework) has been loaded using something similar to:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    // here the $ function is jQuery's because it's an argument
    // to the ready handler
    $('#dateField').datepicker();
  });
  // here the $ function is Prototype's
</script>