The easiest way to add a Datepicker in Rails

A few days ago, I had to put in a registration form for a website, written in Ruby, a tool which gives you the possibility to enter the date, more easily, in the desired format. I decided to use a datepicker in order to allow users to choose the date rather than writing it (a more complex procedure). If a date is chosen, feedback is shown as the input’s value.

At the beginning, the implementation of the interactive calendar was a bit problematic and long, until I found a gem that did the whole work for me. The gem, called Bootstrap Datepicker for Rails, runs from the Rails version 3.1 up to the latest. As usual, to install it just add it to Gemfile with gem 'bootstrap-datepicker-rails' and launch the bundle install.

The configuration is as much as simple than before and it consists of adding two lines of code into the application.css and application.js, in order to assign the Bootstrap style and behaviour.

*= require bootstrap-datepicker // for css
//= require bootstrap-datepicker // for js

At this point, the datepicker is perfectly configured and installed: you must add it into the form where you need it. However, before doing this, we need to customize our interactive calendar to give us the correct date format as output. I found on Google that there is a great tool that allows you to customize your datepicker a lot, without having to waste too much time. In fact, this tool enables you to change many features such as the “start dates”, “end dates”, the type of the date separator, the disabled days of week, etc..

Once you do that, since it was necessary to add many datepickers in a view, I created a helper to manage it in a cleaner way.

  def datepicker_input form, field
    content_tag :td, :data => {:provide => 'datepicker', 'date-format' => 'yyyy-mm-dd', 'date-autoclose' => 'true'} do
      form.text_field field, class: 'form-control', placeholder: 'YYYY-MM-DD'

After that, I put in the view the input fields for the dates and their related interactive calendars.

<%= datepicker_input form, :accepted_at_start%>
<%= datepicker_input form, :accepted_at_end%>

The result was very gratifying because in a very short time I was able to implement a fantastic feature within my project.
Again, all this has been possible thanks to one of the many gems of ruby!

Leave a Reply

Please Login to comment
1 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
Matteo RevelliThi Viet Quynh Nguyen Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

newest oldest most voted
Thi Viet Quynh Nguyen

Hi Matteo,

thank you so much for this tutorial. This works perfectly on my rails app!

Best regard,