Using bootstrap-datepicker in Rails Apps

Using a datepicker widget in Rails is simple. There are two ways of doing so:

• Using ‘date_field’ (HTML5)
• Gem ‘bootstrap-datepicker-rails’

Using 'date_field' to Generate Datepicker Widget

<%= form_for(order) do |f| %>
        :
    <%= f.date_field :shipment_require_date %>
        :
<% end %>       

The datepicker widget will show up while focusing on the field.

However, this HTML5 functionality only supported by Chrome.


It does not work while using Safari or Firefox.

---

Using Gem‘bootstrap-datepicker-rails’

Gem ‘bootstrap-datepicker-rails’ is a datepicker widget gem in the Bootstrap style for Rails. The document is here.

According to the document, just few steps to go and you are all done!

• First, include ‘bootstrap-datepicker-rails’ in Gemfile.

gem 'bootstrap-datepicker-rails'

• And add this line to app/assets/stylesheets/application.css

 *= require bootstrap-datepicker

• Add this line to app/assets/javascripts/application.js

//= require bootstrap-datepicker

• add code 
  There are two ways of coding: 
  
  • jQuery
  • Code In-line

---

jQuery: Assigning values to the options by using javascript.

<%= f.text_field :shipment_require_date, class: "datepicker" %>
        :

    <script type="text/javascript">
      $(document).ready(function(){
        $('.datepicker').datepicker({
          format: "yyyy/mm/dd",
          autoclose: true,
          todayBtn: "linked",
          todayHighlight': true
        });
      });
    </script>

The story ends.

---

Code In-line: Assign values to the options directly in-line.

According to the options document, option should be transformed to a certain format (data-date-) in order to be placed in-line to the code.

All options that take a “Date” can handle a Date object; a String formatted according to the given format; or a timedelta relative to today, eg “-1d”, “+6m +1y”, etc, where valid units are “d” (day), “w” (week), “m” (month), and “y” (year). Use “0” as today. There are also aliases for the relative timedelta’s: “yesterday” equals “-1d”, “today” is equal to “+0d” and “tomorrow” is equal to “+1d”.

Most options can be provided via data-attributes. An option can be converted to a data-attribute by taking its name, replacing each uppercase letter with its lowercase equivalent preceded by a dash, and prepending “data-date-” to the result. For example, startDate would be data-date-start-date, format would bedata-date-format, and daysOfWeekDisabled would be data-date-days-of-week-disabled.

Therefore, option ‘todayBtn’ should be ‘data-date-today-btn‘.
The code of the datepicker part is:

app/views/orders/_form.html.erb

<%= f.text_field :shipment_require_date, 
    data: { provide: "datepicker", 
        'date-format': 'yyyy-mm-dd', 
        'date-autoclose': 'true', 
        'date-today-btn': 'linked',
        'date-today-highlight': 'true'} %>

It generates HTML code as follows:

<input data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-autoclose="true" data-date-today-btn="linked" data-date-today-highlight="true" type="text" name="order[shipment_require_date]" id="order_shipment_require_date" />

Is this way more concise than the jQuery one? It depends. Maybe the jQuery way is better since the code will be cleaner if there are more than two datepicker widgets.

Making a Helper for Code In-line.

As you can see, if using code in-line method and the datepicker input fields are more than one, it is necessary to refactor the code. A helper is created as follows:

app/helpers/application_helper.rb

def datepicker_field(form, field)
    form.text_field(field, data: { provide: "datepicker",
      'date-format': 'yyyy-mm-dd',
      'date-autoclose': 'true',
      'date-today-btn': 'linked',
      'date-today-highlight': 'true'}).html_safe
end

It will generate the HTML code exactly the same as above.

The code of the datepicker part changes to:

app/views/orders/_form.html.erb

<%= datepicker_field(f, :shipment_require_date) %>

It's nice and clean! Happy ending!