3 Ways to Implement Datepicker Input in Rails 6

We look at ways to implement a datepicker input in the newer version of Rails

By Jerin & Awin

Last updated on March 29, 2019

In this article we will look at 3 ways to implement a datepicker input in Rails 6.0. We will first look at the default date_field and then look at two gems to implement this. You can view the demo of this at https://datepicker-rails6.herokuapp.com/.

1. Using the date_field form helper

When using the date_field form helper is the easiest way to implement the date picker input in Rails. This renders the browser specific datepicker widget, corresponding to the <input type='date'>. The datepicker shown is visually different in different browsers. You can read more about this in the Mozilla MDN docs for datepicker.

This too requires changes to the Gemfile, and application.css and application.js files; and is dependent on jQuery and Bootstrap 4. (As mentioned above application.js has to be created and has to be added to the asset pipeline, by modifying the initializers/assets.rb file.)

<divclass="form-group"><%=f.label:release_date%><divclass="input-group date"id="datetimepicker1"data-target-input="nearest"><%=f.text_field:release_date,class: 'form-control datetimepicker-input','data-target':"#datetimepicker1"%><divclass="input-group-append"data-target="#datetimepicker1"data-toggle="datetimepicker"><divclass="input-group-text"><iclass='fa fa-calendar'></i></div></div></div><smallclass="form-text text-muted">Date when the product will be released.</small></div>

And finally initialize the datetime picker in application.js as follows: