jQuery UI的日期選擇器不顯示

UPDATE
我已歸還jQuery的1.3.2和一切工作，不知道是什麼問題，/是因爲我並沒有改變二話不說了jQuery和UI庫的版本。
更新的最終jQuery UI的日期選擇器不顯示

我有與JQuery UI datepicker的問題。日期選擇器被附加到一個類，該部分正在工作，但日期選擇器沒有被顯示。

這是我使用的datepicker代碼，以及當我在包含「.datepicker」類的輸入框中單擊時正在生成的內聯樣式。

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'}); 

display:none; 
left:418px; 
position:absolute; 
top:296px; 
z-index:1;

如果我更改顯示：無顯示：阻止除忽略了最低接近時，我選擇日期的日期選擇器工作正常。

jQuery JavaScript庫。5.0
jQuery UI的1.8 jQuery用戶界面的Widget 1.8
jQuery UI的鼠標1.8 jQuery UI的
位置1.8 jQuery UI的可拖動1.8

在使用jQuery庫

jQuery UI Droppable 1.8 jQuery UI
Datepicker 1.8

來源

2010-04-21 scott

似乎顯示：none和display：block正在重寫datepicker調用的show（）/ hide（）方法。您確定沒有CSS規則在其他地方存在衝突嗎？ – Jeriko 2010-04-21 11:00:19

顯示：沒有正在由datepicker插件生成，沒有css從我的樣式表中附加它。 – scott 2010-04-21 11:04:28

這是新的css文件不起作用。嘗試將舊的1.7。* .css文件也包含在您的標題中，然後重試。

此外，您是否嘗試在構建之後立即執行.datepicker（「show」）？

來源

2010-04-21 14:09:02 user227353

剛纔有同樣的問題，決定將我的css文件更新到最新版本，它工作。我有1.8.16，現在有1.8.21。這個答案只是一個補充。 – Albert 2012-06-11 08:35:22

試着把你的datepicker css的z-index高出很多（例如z-index：1000）。 datepicker可能顯示在您的原始內容下。我有同樣的問題，這幫了我。

來源

2010-04-21 13:34:25 Soldierflup

我改了行

的.ui輔助隱藏訪問的{位置：絕對重要的; clip：rect（1px 1px 1px 1px）; clip：rect（1px，1px，1px，1px）; }

到

的.ui輔助隱藏訪問的{位置：絕對重要的; }

現在一切正常。否則，請嘗試使用Z-index作爲Soldierflup建議。

來源

2011-02-17 00:32:53

仍然沒有爲我工作。我嘗試了這個建議，我嘗試了@brian建議，我檢查了匹配的源代碼版本並設置了z-index。這些都沒有奏效。我的日期選擇器不顯示任何顯示樣式，就好像它除了文本以外都是透明的。 – 2012-06-10 18:50:37

@MikeS。聽起來像包含日期選擇器的CSS文件沒有被應用，或者其他規則正在被應用。你可以在你的瀏覽器（Chrome瀏覽器，最好是）開發工具中檢查你的日期選擇器，看看哪些規則正在應用並從哪裏開始？如果他們不在那裏，請仔細檢查文件的路徑是否正確。 – undefined 2012-07-30 01:27:55

我有同樣的問題，我發現，在我的情況的原因是由於某些原因，日期選擇器的div被保留類的.ui輔助隱藏訪問的，它具有以下CSS：

.ui-helper-hidden-accessible { 
position: absolute !important; 
clip: rect(1px 1px 1px 1px); 
clip: rect(1px,1px,1px,1px); 
}

我使用的是谷歌CDN託管版本的jQuery，所以我無法修改代碼或CSS。我也嘗試過改變z-index沒有任何成功。爲我工作的解決方案是爲日期選擇剪輯屬性設置恢復到默認值，自動：

$('.date').datepicker(); 
$('#ui-datepicker-div').css('clip', 'auto');

由於這個專門針對的日期選擇器的div，有較少的其他部件意想不到的副作用的機率很小而不是整體改變ui-helper-hidden-accessible類。

來源

2011-03-05 02:34:34 undefined

我試過這個，但它對我不起作用。我使用的是Jquery UI 1.8.18和Jquery 1.7.1，所以這是非常新的。 – Adamantus 2012-03-13 11:27:02

你能舉一些例子代碼嗎？有很多原因可能導致它無法工作。我的第一個猜測是這些行不會被調用，或者選擇器沒有選擇你期望它們選擇的內容。 – undefined 2012-03-13 18:43:37

爲我完美工作。謝謝。 – Nathan 2012-08-14 01:53:20

我有同樣的問題：日期選擇器添加成功（甚至可以在FireBug中找到），但不可見。如果您使用FireBug從日期選取器div（ID：「ui-datepicker-div」）中刪除類「ui-helper-hidden-accessible」，則日期選取器將變爲可見狀態，並且可以像正常一樣工作。

如果添加在你的$（document）的最末端以下。就緒（）函數，它會將此到每一個日期選取器，你網頁上，並讓他們所有的工作：

$(document).ready(function() { 
     //... 
     //Put all of you other page setup code here 
     //... 

     //after setting everything up (including adding all Date Pickers) 
     //apply this code to every Date Picker 
     $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible'); 
});

那是我最初的修復。之後，我嘗試了Brian Mortenson上面提出的解決方案，並且它的工作都很完美，並且比從元素中刪除整個類更加簡單。所以，我修改了代碼，以他的解決方案適用於我以前（在文件安裝結束時適用，所以它適用於所有的日期選擇器，並且不需要重複）的方法：

$(document).ready(function() { 
     //... 
     //Put all of you other page setup code here 
     //... 

     //after setting everything up (including adding all Date Pickers) 
     //apply this code to every Date Picker 
     $('#ui-datepicker-div').css('clip', 'auto'); 
});

希望這有助於獲得有人不在。

編輯：修復了代碼語法錯誤。

來源

2011-05-10 18:32:49

如果您在使用WordPress控制面板並使用ThemeRoller生成的主題時遇到此問題 - 請確保您使用的是1.7.3版本的主題，則1.8.13不起作用。（如果你仔細觀察，該元件正被渲染，但的.ui輔助隱藏可訪問導致它無法顯示

當前WP版本：3.1.3

來源

2011-06-25 22:41:32 Andy

* html .ui-helper-hidden-accessible 
{ 
position: absolute !important; 
clip: rect(1px 1px 1px 1px); 
clip: rect(1px,1px,1px,1px); 
}

這只是工作IE瀏覽器，所以我申請這個技巧和工作在FF，Safari和其他罰款。

來源

2011-11-29 21:36:42

請確保您使用的jQuery的UI「JS」和「CSS」文件相同版本，有時可能成爲問題

來源

2012-02-03 19:33:56 Anticipator

這是一個問題完全不同的問題。與我日期選擇器將顯示，但CSS不加載。

我修復了：重新加載主題（轉到jquery ui css，第43行，並複製網址以編輯您的themeroller主題）>重新保存沒有高級選項>替換舊文件>儘量不要更改網址和看看這是否也有幫助。

來源

2012-03-13 12:34:10 Adamantus

好吧，我終於找到了我的解決方案。

如果您在視圖上使用模板（使用Moustache.js或其他...），則必須考慮到您的某些類可以加載兩次，或稍後再創建。所以，一旦創建實例，您必須應用此功能$(".datepicker").datepicker();。

來源

2012-04-08 11:59:21

我有使用JQuery-UI 1.8.21和JQuery-UI 1.8.22的相同問題。

問題是因爲我有兩個DatePicker腳本，其中一個嵌入了jquery-ui-1.8.22.custom.min。js另一個在jquery.ui.datepicker.js（舊版本升級到1.8.21之前）。

刪除重複jquery.ui.datepicker.js，解決問題的兩個21年1月8日和22年1月8日。

來源

2012-07-29 14:03:26 Jeremie

似乎在我的情況下會發生一些主題（cupertino/theme.css）。

問題是.ui-helper-hidden-accessible類具有剪輯屬性，就像以前的用戶說的那樣。

只是簡單地覆蓋它，它會被罰款

$(document).ready(function() { 
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" }); 
    $('#ui-datepicker-div').css('clip', 'auto'); 
});

來源

2013-08-11 17:46:07 user2672796

如果您正在使用的Metro UI的CSS（優秀的免費地鐵UI從http://metroui.org.ua/設置）的腳本，可以發生衝突了。就我而言，這是最近的問題。

因此，刪除了metro UI的腳本引用（因爲我沒有使用它的組件），datepicker正在顯示。

但你不能得到的日期選擇器的jQuery UI的

但在大多數情況下，地鐵的樣子，其他人所說，它的衝突與jQuery UI的JavaScript的重複的版本。

來源

2013-12-11 14:28:57

我有類似的問題與jQuery和jQuery UI的1.7.2版本。彈出窗口沒有顯示出來，並且上面的適用建議都沒有幫助。在我的例子中，幫助我取出了class =「hasDatepicker」（這裏接受的答案是：jQuery UI datepicker will not display - full code included）被jquery-ui用來指示日期選擇器已經添加到文本字段中。希望我早日找到答案。

來源

2015-02-17 23:20:28 Spaceploit

我一直有類似的問題。它會在不同的標籤下啓動一次而不是第二次。我使用了一個類而不是一個id，並且在任何地方都使用相同的類名。對我來說，似乎datepicker激活一次，原來的初始化必須在任何地方使用。我們可以使用destroy api編碼，但對我來說，在任何地方簡單地使用同一個類是很容易的。

來源

2015-06-11 20:03:52

有與datepicker-DIV創建相同的問題，但沒有得到填充和點擊顯示。我的錯在於靜態地給輸入類「hasDatepicker」。 jQuery-ui帽子來自己設置這個類。那麼它適用於我。

來源

2015-07-23 10:31:07

這裏是完整的代碼，它是從我身邊工作：只是測試。

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>jQuery Datepicker</title> 
     <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <script> 
     $(function() { 
      $("#datepicker1").datepicker(); 
     }); 
     </script> 
    </head> 
    <body> 
     <p>Enter Date: <input type="text" id="datepicker1"></p> 
    </body> 
</html>

來源

2016-06-16 10:09:06 Hrushi

我發現了一個絕招解決方案。您可以使用下面的代碼。

$(".datepicker").datepicker({ 
/* any options you want */ 
beforeShowDay: function (date) { 
    $('#ui-datepicker-div').css('clip', 'auto'); 
    return [true, '', '']; 
    } 
});

來源

2016-12-14 07:50:51 adenizc

這可能對某人有用。如果您複製並粘貼您的表單數據（具有日期選擇器輸入框，確保您不無意中複製類=「hasDatepicker」

這意味着你的輸入框應該是這樣的：

<input id="dateChooser" name="dateChooser" type="text" value=""/>

不

<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

我犯了那個錯誤不經意間。卸下類和允許jQuery UI的呼叫出現來修復它。

希望能幫助別人！

來源

2017-09-14 14:39:46 Bren1818

正是這樣。 – qub1n 2017-10-20 10:21:22

jQuery UI的日期選擇器不顯示

回答

相關問題