2011-11-10 42 views
0

在我的Rails項目我目前有以下幾點:如何讓jQuery datepicker在我的Rails頁面上正確加載?

= f.label :created_at_gteq 
= f.text_field :created_at_gteq, { :class => "ui-date-picker hasDatepicker" } 
= f.label :created_at_lteq 
= f.text_field :created_at_lteq, { :class => "ui-date-picker hasDatepicker" } 

產生如下:

<label for="q_created_at_gteq">Created at greater than or equal to</label> 
<input class="ui-date-picker hasDatepicker" id="q_created_at_gteq" name="q[created_at_gteq]" size="30" type="text"> 
<label for="q_created_at_lteq">Created at less than or equal to</label> 
<input class="ui-date-picker hasDatepicker" id="q_created_at_lteq" name="q[created_at_lteq]" size="30" type="text"> 

在我的application.js我有以下幾點:

//Makes calendar UI popup on date fields 
$(function() { 
    // Initializers and variables 
    $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' }); 
    console.log($('input.ui-date-picker').datepicker()); 
}); 

以下在加載頁面時在我的javascript控制檯中返回:

[<input class=​"ui-date-picker hasDatepicker" id=​"q_created_at_gteq" name=​"q[created_at_gteq]​" size=​"30" type=​"text">​ 
, 
<input class=​"ui-date-picker hasDatepicker" id=​"q_created_at_lteq" name=​"q[created_at_lteq]​" size=​"30" type=​"text">​] 

body標籤結束前,下面的HTML插入:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div> 

所以我知道它找到正確的輸入,它甚至看起來像它試圖將datapicker添加到DOM,但正在添加的div缺少div內的所有內容以及正確定位它的內聯樣式,所以當我點擊日期字段時,datepicker不顯示。

任何想法爲什麼它返回datepicker不正確?

感謝您的期待。

回答

1

似乎與輸入元素的多個類的問題。

演示 - http://jsfiddle.net/ffwr2/4/

移除的第一個元素hasDatepicker它工作得很好。
鑑於,第二個仍然不起作用。
刪除兩者都應該工作。

相關問題