How to implement jQuery datepicker in Rails app

There are lots of JQuery datepickers to choose from, here's a list: http://www.tripwiremagazine.com/2012/08/jquery-datepicker.html

You might want to consider using the input=date HTML5 element with a JQuery fallback using modernizr

http://www.growingwiththeweb.com/2012/08/using-html5-date-picker-with-backwards.html

Also, would this be the kind of stuff coming up in the "Build an interactive website" course on Treebook? Because I would love to do that one, but it's a lot and it preceeded by "Build a simple website" & "Build a responsive website", and right now I'm having fun working on my Rails app.

Thanks James, nice resources!

I mean though, I'm not yet at the level to start using those resources, so I'm basically asking advice on how to proceed to learn things so I can add some jQuery to my Rails app.

Could I just make my way through by finding some examples here and there and implementing them? Or would it be wiser to do the tutorials right now?

I use the jquery ui datepicker ( http://jqueryui.com/datepicker/ ). Visit that page and click "view source". It gives a quick easy example. Just be sure to include the jquery ui in your rails project.

You're on the right track with including the JS and CSS in their appropriate vendor subdirectories. Next up, make sure the jQuery plugin is loaded, by adding it after the require statement for jquery in app/assets/javascripts/application.js e.g.. Load the CSS in your application layout file by adding it to the stylesheet_link_tag line.

There's actually not much that you should need to do on the Rails side. The plugin you mentioned will return a string in the format that an ActiveRecord datetime field should know how to parse. Just change your simple_form directive to display this as a standard input field (i.e. not via 'as: :date').

Finally, you have to trigger the jQuery plugin via something like '$( '.datepicker' ).pickadate()' per the instructions (replacing .datepicker with the class of your input field I just mentioned, e.g. by specifying ':input_html => { :class => 'datepicker' }' in your input field definition in simple_form). This could go after the require statements in application.js again, if you haven't structured your JavaScript further, or you can just put it into a script tag at the bottom of the template with the form.

Just to be sure, wrap it into a $(function() { ... }); block, to make sure the DOM is loaded before your datepicker plugin is called.