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

回答

相关问题