Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

How to implement jQuery datepicker in Rails app

Hey guys,

I just saw the latest Treehouse show in which Jason and Jim discussed, amongst other things, a nice-looking jQuery datepicker. I would like to include this in the simple_forms that I'm using in the Rails app I'm trying to build.

The site for pickadate says:

As easy as: $( '.datepicker' ).pickadate()

Thing, is for me it's not that easy because I know virtually nothing about implementing javascript / jquery :) Through some googlin, I figure I gotta include the file pickadate.js in /vendor/assets/javascripts & pickadate.css in /vendor/assets/stylesheets. But I have no idea how to continue.

Any pointers, hints in the right direction? Articles, videos? I assume it really is simple.

Screenshot of my current form, and what I would like to include

5 Answers

James Barnett
James Barnett
39,199 Points

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.

Joost Schuur
Joost Schuur
6,012 Points

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.