Datepicker混亂

這一個讓我拉我的頭髮。Datepicker混亂

我想實現一個非常簡單的jQuery datepicker。我直接使用在線示例代碼。

我終於開始了一個空白頁面，沒有CSS（除了微軟jQuery UI的主題，當我查看網頁，我得到我下面的文本框中輸入一個藍條：

...鼠標懸停在該酒吧會導致JavaScript錯誤

如果我點擊日期框，我得到的日期選擇器的這種混亂的版本：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
     <link type="text/css" href="/JavaScript/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />  
     <script src="/JavaScript/jquery.min.js" type="text/javascript"></script> 
     <script src="/JavaScript/jquery-ui.min.js" type="text/javascript"></script> 
     <script src="bench.js" type="text/javascript"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
      <div class="demo"> 
       <p>Date: <input id="datepicker" type="text" /></p> 
      </div> 

    </form> 
</body> 
</html>

bench.js：

$(function() { 
    $("#datepicker").datepicker(); 
});

版本

的jQuery V1.7.1（也嘗試1.7） jQuery UI的16年8月1日 IE 9，Firefox（最新版）

我甚至嘗試了一個腳本，我發現等待onclick綁定日曆。這擺脫了藍色的酒吧，但仍然顯示我一個混亂的日曆。

來源

2012-02-24 Brian MacKay

它看起來像你的CSS是使字體太大，以規模很好。 – 2012-02-24 21:31:49

你可以發佈一個鏈接到現場的例子，JSFiddle也許？ – Jasper 2012-02-24 21:32:44

@ scott.korin：我沒有任何CSS。唯一的CSS來自redmond主題。 – 2012-02-24 21:34:16

你可以直接嘗試下面的代碼。不同的是我用谷歌CDN路徑到JavaScript。它工作正常。我使用你提到的版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
<!--  <link type="text/css" href="/JavaScript/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />  
-->   <link href="http://code.jquery.com/ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
      <div class="demo"> 
       <p>Date: <input id="datepicker" type="text" /></p> 
      </div> 

    </form> 
    <script src="bench.js" type="text/javascript"></script> 
</body> 
</html>

來源

2012-02-24 21:40:24 DG3

...那......完美地工作。好神。那麼這是什麼意思，我有一個腐敗的雷德蒙版本？ – 2012-02-24 21:44:05

不確定。嘗試再次下載文件，並嘗試將您的bench.js移動到文檔結尾，因爲您正在使用自調用功能。也許有人可以在這裏支持我，一個自調用函數是通過頁面流來運行的，如果你想把你的腳本放在head標籤中，用document.ready函數替換你的自調用函數，以確保它在dom之後運行被加載。 – DG3 2012-02-24 21:49:11

只是想再次跟進，說謝謝你的幫助，你可能救了我免於浪費更多時間。我有一個CSS文件的自定義版本，所以我打賭一些東西只是缺少。簡單地切換到從谷歌CDN拉CSS解決了一切。 – 2012-02-24 21:52:14

Datepicker混亂

回答

相關問題