Rod McLaughlin

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

You know datepickers? When you click on 'date' in, say, expedia.com, 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

http://upcomer.wordpress.com/2011/02/16/add-datepicker-in-rails3-app

but it doesn't work in Rails 3.2 onwards.

http://www.chadcf.com/blog/jqueryui-datepicker-rails-and-simpleform-easy-way

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, http://haml.info, 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: http://railsforum.com/viewtopic.php?id=47494

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? https://github.com/albertopq/jquery_datepicker

"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: http://rodmclaughlin.com/why-do-rails-developers-use-macs-

Got it.

http://www.techblog.ezglobalads.com/?tag=ruby-rails-calendar-date-picker

says

$ ruby script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select

but that doesn't work with Rails 3.

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

doesn't work.

Finally got it...

Get

http://code.google.com/p/calendardateselect/

and move the code around -

$ rails plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select
$ 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:

app/assets/javascripts/calendar_date_select/public/javascripts/calendar_date_select/calendar_date_select.js

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

and you also need this, just underneath it:

  <% CalendarDateSelect.format = :american %>

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

lib/calendar_date_select/lib/calendar_date_select.rb

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 +

              '/public/javascripts/calendar_date_select/calendar_date_select.js'

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.mkdir_p(dest)
    FileUtils.cp(Dir.glob(source+'/*.*'), dest)
  end
end