Datepicker不能使用引導模式

我想在rails項目上實現引導模式。它工作正常，但我的datepicker不在模態內工作。在我的索引文件，我已經在在app /視圖/產品/ search_products.js.erb以下Datepicker不能使用引導模式

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

然後，我有

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

而且裏面的 'search_product' 部分，

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

我正在使用rails4 datepicker不是來自bootstrap，而是在我的應用程序的非模態頁面中正常工作。如果有人能告訴我我做錯了什麼，我將不勝感激。

感謝

來源

2014-10-16 Tiamon

我的問題不清楚或不夠有趣，值得回答嗎？ :-) – Tiamon 2014-10-16 10:58:26

嘗試使用這個，我廣泛地在我的項目中使用它。

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

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

來源

2014-10-16 12:14:58

謝謝。這也不起作用。即使將JavaScript代碼放入呈現的部分內也不起作用。 – Tiamon 2014-10-16 12:53:09

清除瀏覽器緩存並重試。 – 2014-10-16 13:02:18

我用Firefox試過了，顯然我可以看到它隱藏在模態後面。真是一場悲劇！ :-) – Tiamon 2014-10-16 13:12:21

在你app/views/products/search_products.js.erb還必須明確初始化的日期選擇爲你動態地添加HTML到DOM。所以文件應該看起來像（取決於你使用的日期選擇器）：

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

來源

2014-10-16 11:15:21 mccannf

感謝您的回答。但是，不幸的是，即使在實現您的建議後，我在輸入字段中得到的內容是：{：type =>「text」，：placeholder =>「cick_here」，：class =>「form-control date_picker」} – Tiamon 2014-10-16 11:53:31

您能展示什麼實際呈現的HTML看起來像模態內部？ – mccannf 2014-10-16 13:08:28

正如我在下面的另一條評論中所說的，當我從Chrome切換到Firefox時，我可以看到彈出窗口隱藏在模式後面。我正在閱讀有關從其他主題增加z-index的內容。謝謝 – Tiamon 2014-10-16 13:16:27

Datepicker不能使用引導模式

回答

相關問題