CODEWITHSUNDEEP
ruby-on-railsbootstrap-modal
Tiamon
Tiamon

Reputation: 237

Datepicker doesn't work with bootstrap-modal

I am trying to implement bootstrap modal on a rails project. It works fine except that my datepicker is not working inside the modal. In my index file I have the following 

<%= link_to "search_products", search_products_path, remote: true,  "data-toggle" => "modal", 
     'data-target' => '#search-products' %>

<div class="modal fade" id="search-products" tabindex="-1"  
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content"></div>
  </div>
</div>

Then in app/views/products/search_products.js.erb I have

 $("#search-products").html("<%= escape_javascript(render 'products/search_product') 
  %>")

And inside the 'search_product' partial, 

  <%= text_field_tag :date_purchased, type: "text", placeholder: t('click_here'), 
     class: "form-control date_picker" %>

I am using rails4 The datepicker is not from bootstrap and works fine in non-modal pages of my application. I would appreciate it if someone could tell me what I am doing wrong.

Thanks

Upvotes: 2

Views: 1343

Answers (2)

Ronak Jain
Ronak Jain

Reputation: 1783

Try using this, I use this extensively in my project.

$('body').on('shown.bs.modal', '.modal', function () {

        //Or perhaps any other initializer.
        $('[databehaviour~=datepicker]').datepicker({
            minViewMode: "months",
            format: "MM-yyyy",
            startDate: "today"
        });
}

Upvotes: 1

mccannf
mccannf

Reputation: 16659

In your app/views/products/search_products.js.erb you must also explicitly initialize the datepicker as you are adding the HTML dynamically into the DOM. So the file should look something like (depending on what datepicker you use):

$("#search-products").html("<%= escape_javascript(render 'products/search_product') %>");
$(".date_picker").datepicker();

Upvotes: 3

Related Questions