HomeWorking on current projects, I found it necessary to create tens of date form fields. The View part is the weekest among MVC in Rails in comparition to other frameworks (Grails…), so it is quite obvious I looked for some helper. The best I have found is Formtastic. I have found a very DRY soultion to add new filed type to formtastic, that would automatically integrate this filed with jQuery UI datepicker.
Step-by-step manual
1. Download jQuery and jQuery UI and include them to your layout with javascript_include_tag and stylesheet_link_tag.
2. I assume you have formtastic gem installed. Then go to Configuration/Initializers/formtastic.rb and add the following lines in the beginning of the file:
module Formtastic
module DatePicker
protected
def datepicker_input(method, options = {})
format = options[:format] || ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS[:default] || '%d %b %Y'
string_input(method, datepicker_options(format, object.send(method)).merge(options))
end
# Generate html input options for the datepicker_input
#
def datepicker_options(format, value = nil)
datepicker_options = {:value => value.try(:strftime, format), :input_html => {:class => 'ui-datepicker'}}
end
end
end
Formtastic::SemanticFormBuilder.send(:include, Formtastic::DatePicker)
3. Add the following lines to public/javascript/application.js:
$(document).ready(function(){
$('input.ui-datepicker').datepicker();
});
4. Ready! Now you can use a new tag :as => :datepicker inside formtastic tag, as in the following example:
<% semantic_form_for @master do |f| -%>
<% f.inputs do -%>
<%= f.input :name %>
<%= f.input :born, :as => :datepicker %>
<% end -%>
<%= f.buttons %>
<% end -%>
I hope it will help 
Drop a comment if you have any questions.
Update
Thanks to demersus, there is a plugin integrating jQuery UI datepicker with Ruby on Rails Formtastic — thanks!
Czerwiec 2nd, 2010 at 17:10
Hi,
it’s a very nice and easy tutorial. Maybe you have seen something like this before?
undefined method `datepicker_input’ for #
Have you any idea why the method ‚datepicker_input’ couldn’t be found which is defined in the Configuration/Initializers/formtastic.rb
Thanks.
Cheers
Czerwiec 3rd, 2010 at 23:53
Hi! Thanks for the remark — I forgot to put one quite important line in the turorial:
It should go to Configuration/Initializers/formtastic.rb
I have already updated the code — thanks!
Drop me a message whether it works now.
Lipiec 25th, 2010 at 16:12
Thanks!
I had some problems but the link you suplied helped me out. I forgot to download the jquery.ui.datepicker.js file. I just realized that when I downloaded this project which has this datePicker configured: http://github.com/sch1zo/TrainingsLog
Sierpień 30th, 2010 at 22:52
Hello,
Your tutorial is exactly what I am looking for. But I encounter the same error as cleo_sunshine.
> undefined method `datepicker_input’ for #
And I have your last version with the last line
Formtastic::SemanticFormBuilder.send(:include, Formtastic::DatePicker)
Do you have any idea ?
Sierpień 30th, 2010 at 23:04
are you sure that
Formtastic::SemanticFormBuilder.send(:include, Formtastic::DatePicker)
has to be added „Configuration/Initializers/formtastic.rb ” ?
I found this : http://gist.github.com/271377
and here the same line is added to config/environment.rb
I still have an error but not the same. It is a bit late here I will investigate it later.
More news later.
Thanks again
Sierpień 30th, 2010 at 23:13
my again,
no more ruby/rails error. but know no datepicker is displayed when I click in the input … but I think I will succeed to solved the problem.
In my case I have to copy the line
Formtastic::SemanticFormBuilder.send(:include, Formtastic::DatePicker)
into config/environment.rb
Wrzesień 4th, 2010 at 17:33
Thanks for a great solution. Will the solution work for datetime fields also? If not, does something have to be changed?
Wrzesień 4th, 2010 at 19:17
Hi Rxra!
Did you manage to run the jQuery UI datepicker on your site?
For me and several other users in worked when the line:
was added at the very bottom of Configuration/Initializers/formtastic.rb.
Maybe it is Rails version dependent? Please drop a comment how you solved this
Wrzesień 4th, 2010 at 20:06
sorry I did not answer
me I have to add this line in config/environment.rb
Wrzesień 5th, 2010 at 17:05
hi Mark!
I’m glad you liked the solution.
Concerning the datetime fileds: I think it should work too withouth any modifications. If you provide plain date for datetime field, there should be just the default 00:00 for hours and minutes.
Please drop a comment when you try this
Wrzesień 13th, 2010 at 22:45
To get this solution working in Rails 3, replace:
format = options[:format] || ActiveSupport::CoreExtensions::Date::Conversions::DATE_FORMATS[:default] || ‚%d %b %Y’
with:
format = options[:format] || Date::DATE_FORMATS[:default] || ‚%d %b %Y’
(The core extensions are now included in the classes they extend).
Cheers!
Onno
Wrzesień 14th, 2010 at 20:06
I just wanted to thank you for making this, it is very useful!
But I wanted to point out an error I was having with date formatting. I think it is because formtastic’s API changed.
This method:
def datepicker_options(format, value = nil)
datepicker_options = {:value => value.try(:strftime, format), :input_html => {:class => ui-datepicker’}}
end
was not formatting my date properly. I had to change it to this for it to work:
def datepicker_options(format, value = nil)
datepicker_options = {:input_html => {:class => ‚ui-datepicker’,:value => value.try(:strftime, format)}}
end
* Notice the :value attribute had to be moved under :input_html
Wrzesień 14th, 2010 at 21:07
Do you mind if I modify this and turn it into a plugin on github? I think it would help a lot of people out.
Please email me if you have any concerns or comments. I will assume that you don’t mind since you posted the source code publicly if I do not hear back from you.
(I will make a reference back to this post for credit.)
Wrzesień 27th, 2010 at 15:17
great idea Demersus! feel free to do it
Listopad 2nd, 2010 at 18:53
Here is the url to the github repo: http://github.com/demersus/formtastic_datepicker_inputs
Sierpień 28th, 2011 at 17:40
Hello, i have a problem with the form because i haven’t a model, i used ‚form_tag’ for render a ‚Form Search’, and I have a problem here:
Message Error:
undefined method `input’ for nil:NilClass
My code:
:get, :remote => true do |form| %>
:datepicker %>
Październik 18th, 2011 at 14:11
Txs for the tutorial. Whatever I try I keep getting ‚Formtastic::UnknownInputError’. Any idea where I went wrong or what to do? I googled fro this error but no luck. I’m rails 3.0.3.
regards,
Rutger
Luty 25th, 2012 at 02:14
Hey Grzegorz, if you are using Rails 3.1/3.2, check out the jquery-ui-rails gem I wrote to serve jQuery UI components like the datepicker through the asset pipeline: http://www.solitr.com/blog/2012/02/jquery-ui-rails-gem-for-the-asset-pipeline/ — repo: https://github.com/joliss/jquery-ui-rails
Thought this might be interesting for you!
Luty 25th, 2012 at 11:52
Hey Jo,
Great news! Surely I will use it, thanks for the useful info!
Kwiecień 16th, 2012 at 23:52
Thanks @Jo Liss for the update! Certainly it will be useful for me
Kwiecień 22nd, 2012 at 13:31
Uncaught exception: uninitialized constant Formtastic::SemanticFormBuilder
Formtastic::UnknownInputError
Extracted source (around line #47):
44:
45:
46:
47: :datepicker %>
48:
49:
50:
Wrzesień 26th, 2012 at 22:57
Here’s the new syntax:
class DatepickerInput true, :value => object.send(method).try(:strftime, format))
end
end