jQuery-ui datepicker与ransack

Question

I am trying to set a date range filter with ransack. So in my view:

 <%= f.text_field :DATE_gteq, :id => "datepicker" %>
 <%= f.text_field :DATE_lteq, :id => "datepicker" %>

And I'm using jquery-ui datepicker.

To set it up:

Gemfile:

gem 'jquery-ui-rails' 

application.js

//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker

$("#datepicker").datepicker();

application.scss

@import 'jquery-ui/datepicker';

application.html.erb

 <script>
      $(function() {
          $( "#datepicker" ).datepicker();
      });
  </script>
  </body>

The problem is that in view when I click on the first search field it does show the calendar, when I click on the second one nothing happens.

What could be the cause?

Answer 1

Note: You can't have multiple duplicate id's on same page

Use a class in the view and call as below:

$('.datepicker').each(function(){
    $(this).datepicker();
});