Question

我正在尝试在rails项目上实现bootstrap模式。它工作正常，除了我的日期选择器不在模态内工作。在我的索引文件中，我有以下

<%= 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>

然后在app / views / products / search_products.js.erb中我有

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

在＆＃39; search_product＆＃39;内部分，

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

我正在使用rails4 datepicker不是来自bootstrap，在我的应用程序的非模态页面中工作正常。如果有人能告诉我我做错了什么，我将不胜感激。

谢谢

Answer 1

在app/views/products/search_products.js.erb中，当您将HTML动态添加到DOM中时，还必须显式初始化日期选择器。所以文件应该看起来像（取决于你使用的datepicker）：

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

Answer 2

尝试使用它，我在我的项目中广泛使用它。

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

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

Datepicker不适用于bootstrap-modal

2 个答案: