how to use date picker in bootstrap form on rails

Question

I use rails-bootstrap-forms gem to create a form in rail app. In the form, I have a date input:

<%= f.date_select :end_date, hide_label: true %>

I want to use date picker in bootstrap-datepicker-rails gem, it give a example that:

<input type="text" class='datepicker' >

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker();
  });
</script>

or

<input type="text" data-provide='datepicker' >

I followed this answer and changed my code, but it didn't work:

<%= f.text_field :start_date, hide_label: true, class: 'datepicker' %>
<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker();
  });
</script>

Then, I followed the description in the bootstrap_form:

If you want to add an additional css class or any other attribute to the form group div, you can use the wrapper: { class: 'additional-class', data: { foo: 'bar' } } option.

And changed my code into:

<%= f.text_field :start_date, hide_label: true, wrapper: {class: 'datepicker'} %>

It didn't work as well. So how to fix this problem? thanks.

Answer 1

Check your application js and css for required files

Configuration

Add this line to app/assets/stylesheets/application.css

*= require bootstrap-datepicker

Or if using bootstrap v3:

*= require bootstrap-datepicker3

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

//= require bootstrap-datepicker

this should work:

<%= f.text_field :start_date, hide_label: true, class: 'datepicker' %>