jQuery Datepicker Rails plugin¶ ↑

This simple gem allows you to add a date picker field into your views.

Getting Started¶ ↑

Pre Rails 3.1:

1. Add into your Gemfile:

   gem 'jquery-rails'
   

2. Execute this command to install the needed js files:

   rails generate jquery:install --ui

3. Insert into your Gemfile:

   gem 'jquery_datepicker'
   

Don’t forget to install the CSS!

Rails 3.1:

1. Insert into your Gemfile:

   gem 'jquery_datepicker'
   

2. If you are using Rails 3.1 with the asset pipeline enabled (default), the necessary files are already in your asset pipeline. Just add (if they are not already there) to your app/assets/javascripts/application.js:

   //= require jquery
   //= require jquery-ujs
   //= require jquery-ui

(if you are using datetime picker, add also)

//= require jquery-ui-timepicker-addon.js

You can find it here:

github.com/trentrichardson/jQuery-Timepicker-Addon

Usage¶ ↑

Add this to your view.

<%= datepicker_input "user","birthday" %>

Where “user” is your model name and “birthday” the name of the datefield.

You can also use it with the form helper like:

<% form_for(@user) do |f| %>
  <%= f.datepicker 'birthday' %>
  <%= f.submit 'Create' %>
<% end %>

Nested attributes are permitted as well:

<% form_for(@user) do |f| %>
  <% f.fields_for(@nested) do |f2| %>
    <%= f2.datepicker 'birthday' %>
  <% end %>
  <%= f.submit 'Create' %>
<% end %>

You can pass options as it would be a normal text_field, plus all the datepicker options available (jqueryui.com/demos/datepicker/#options)

<%= datepicker_input(:foo, :att1, :minDate => -20, :maxDate => "+1M +10D", :tabindex => 70) %>

Use DateTime picker¶ ↑

If you want to use a datatime picker, download this plugin

github.com/trentrichardson/jQuery-Timepicker-Addon

and add it to your project (in the assets pipeline if you are using Rails 3.1 or manually otherwise). Don’t forget the CSS! This plugin assume you have installed a jquery-ui theme.

Then you can use in your views:

<%= datetime_picker_input "user","loged_in", :dateFormat => "yy-mm-dd" %>

or

<% form_for(@user) do |f| %>
  <%= f.datetime_picker 'loged_in', :dateFormat => "yy-mm-dd" %>
  <%= f.submit 'Create' %>
<% end %>

Important! Be aware the way Rails stores the datetime fields cause you’ll need to specify the dateFormat to “yy-mm-dd” or pre-process your field value on the controller. The default format won’t work.

Support¶ ↑

Open an issue in github.com/albertopq/jquery_datepicker if you need further support or want to report a bug