Catmal Catmal - 1 month ago 19
Javascript Question

Jquery-ui datepicker with ransack

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

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();
});
Comments