Bootstrap Date-picker on Rails – so simple!

Implementing a datepicker – Simple ( not…!)

My RoR app is using twitter bootstrap for all my styles. Not only does this significantly reduce my need for extensive front end development, it also provides a responsive framework to enable the app to deploy to a range of devices.

The standard date field in the Twitter Bootstrap is a slightly clunky-looking set of fields for entering each component of the date (and additional fields for entering time):

Screen Shot 2013-07-03 at 4.43.28 PM

I prefer a single field, and would also like to provide a date-picker option – it’s pretty standard to offer this and I prefer to see a future date in context of weeks and months.  So I landed on the following, which displays the date picker when the field gets focus, but which also permits keyboard typing of the date:

date-picker

So, with the goal set, it’s time to figure out how to actually implement this!

A visit to CodeAcademy and a whirlwind tour of jQuery basics, which included a simple exercise to display 2 datepickers on a page, gave me a basic understanding of the  jQuery datepicker.  A start, but not exactly transferrable to my Ruby on Rails Bootstrap project.

Fortunately GitHub came through with a solution (see the GitHub project for a bootstrap datepicker integrated with Rails 3 assets pipeline).  There are a couple of forks – but I think the following gives me a pretty mature picker, and the implementation method seems to be the same across the forks…

There are lots of snippets and samples – but many seem to do a bunch of stuff in html and js, that I am not planning to do given I am using the bootstrap. The following works like a charm for me, although I have yet to try adding two datepickers to the same view… I’ll start with the small wins!

  1. Add the datepicker gem to my Gemfile:
     gem 'bootstrap-datepicker-rails'

    Run bundle install

  2. Update the assets stylesheets application.css.scss, by adding
     *= require bootstrap-datepicker

    Inserted above the line for *= require_tree .

  3. Update the assets javascripts application.js by adding
     //= require bootstrap-datepicker

    Inserted above the line for //= require_tree .

  4. Update target view’s coffee.js with:
     $(document).on "focus", "[data-behaviour~='datepicker']", (e) ->
     - $(this).datepicker
     - format: "dd-mm-yyyy"
     - weekStart: 1
     - autoclose: true

    Note that this is in coffeescript – not javascript. Use the JS – Coffee translator if you plan to implement different javascript.

  5. Update the target view’s .erb (e.g. _form.html.erb)
    For me, that meant removing:

    <%= f.datetime_select :review_date %>

    and adding:

    <%= f.text_field :review_date, 'data-behaviour' => 'datepicker' %>

And that’s my “how to” for future reference.  Still on the task list:

  • Check if this implementation is compatible with Rails 4.
  • Determine if this implementation will support multiple dates on a single view.
  • Verify on a range of browsers/devices.
  • Display the required date format (infield) for keyboard users (e.g. dd/mm/yy).

On y va!

Advertisements

4 thoughts on “Bootstrap Date-picker on Rails – so simple!

  1. Pingback: Date picker, Rails, Javascript | technpol

    • Hey Carlos – that solution worked for me back in 2013, so almost 4 years ago. I haven’t used Ruby or Bootstrap in the past couple of years so I haven’t got any recent advice for you on more recent solutions and versions. Undoubtably things have changed heaps since then. Best of luck!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s