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):
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:
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!
- Add the datepicker gem to my Gemfile:
gem 'bootstrap-datepicker-rails'
Run bundle install
- Update the assets stylesheets application.css.scss, by adding
*= require bootstrap-datepicker
Inserted above the line for *= require_tree .
- Update the assets javascripts application.js by adding
//= require bootstrap-datepicker
Inserted above the line for //= require_tree .
- 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.
- 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!
Pingback: Date picker, Rails, Javascript | technpol
Not sure if you sorted the placeholder text but I just added this to my f.text_field
‘placeholder’ => “dd-mm-yyyy”
I accomplished everything you wrote, but it did not work. Need help
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!