Rod McLaughlin

How to add a datepicker in Rails (25 nov 12)

You know datepickers? When you click on 'date' in, say,, and a calendar pops up?

This is supposed to be easy in Rails. But it isn't, and it's difficult to find out why. If you google 'Rails datepicker', you'll find this

but it doesn't work in Rails 3.2 onwards.

is typical of Rails blogging - it only tells you half of what you need to know, leaving you to guess the rest. I think it uses HAML, which claims to make HTML easier in Rails.

Not only that, when I tried to submit a comment asking if it is HAML, it said 

Your submission has triggered the spam filter and will not be accepted.

HAML is explained here,, but I can't quite see what the improvement is. It does HTML without the angle brackets and a few other things, but so what?

Another example:

I can't make head nor tail of it. 


Another thing: you find a number of 'Railscasts', which have pictures of code instead of code. You can't copy and paste code from a picture file.



OK, how about this?


"Don’t forget to install the CSS!"

Err... how do you do that?


It told me to do this:

$ rails generate jquery:install --ui

which said this:

You are using Rails 3.1 with the asset pipeline enabled, so this generator is 
not needed. The necessary files are already in your asset pipeline. Just add 
`//= require jquery` and `//= require jquery_ujs` to your app/assets/javascripts/application.js

It turned out that these lines were already in my application.js file, and it didn't work.

I try to write painstakingly accurate instructions for solving Rails issues. I don't assume I'm talking to people who know what the 'asset pipeline' is, or HAML, or whatever. Here's an example:


Got it.


$ ruby script/plugin install

but that doesn't work with Rails 3. 

 <%= calendar_date_select_includes %> in application.erb.html 

doesn't work.

Finally got it... 


and move the code around -

$ rails plugin install
$ mkdir app/assets/javascripts/calendar_date_select
$ cp -Rf vendor/plugins/calendar_date_select/*  app/assets/javascripts/calendar_date_select/
$ rm app/assets/javascripts/calendar_date_select/public/javascripts/calendar_date_select/locale/* 

Javascripts go into app/assets/javascripts/calendar_date_select/ - an example is:



I created folder public/stylesheets/calendar_select/, put all the CSS files in it, and explicitly refer to them in erb files:

  <link href="/stylesheets/calendar_date_select/default.css" media="all" rel="stylesheet" type="text/css" />

and you also need this, just underneath it:

  <% CalendarDateSelect.format = :american %>


Ruby files go in lib/calendar_date_select/, for example:



At the top of app/views/layouts/application.html.erb, put this:

<% require "#{ Rails.root }/lib/calendar_date_select/lib/calendar_date_select.rb" %>

and an example of a text field with a datepicker is 

<%= calendar_date_select_tag "my_date", [ ], :year_range => 100.years.ago..0.years.ago  %>


Finally, copy init.rb into config/initializers/, change its name to calendar_date_select_init.rb, and edit it so its like this:

%w[calendar_date_select includes_helper].each { |file| 
  require File.join( Rails.root, "lib", "calendar_date_select", "lib", file ) 
ActionView::Helpers::FormHelper.send(:include, CalendarDateSelect::FormHelper)
ActionView::Base.send(:include, CalendarDateSelect::FormHelper)
ActionView::Base.send(:include, CalendarDateSelect::IncludesHelper)

APP_ASS_CAL = 'app/assets/javascripts/calendar_date_select'
CAL_APP_SRC = "#{Rails.root}" + '/' + APP_ASS_CAL + 

unless File.exists?( CAL_APP_SRC )
  raise "Calendar Javascript is not installed - it should be " + CAL_APP_SRC 
  [ APP_ASS_CAL + '/public', 
    APP_ASS_CAL + '/public/javascripts/calendar_date_select',
    APP_ASS_CAL + '/public/stylesheets/calendar_date_select', 
    APP_ASS_CAL + '/public/images/calendar_date_select', 
    APP_ASS_CAL + '/public/javascripts/calendar_date_select/locale'].each do |dir|
    source = File.join(directory,dir)
    dest = Rails.root + dir
    FileUtils.cp(Dir.glob(source+'/*.*'), dest)


Portland London