javascript jQuery DatePicker 不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6300082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DatePicker not showing
提问by kingrichard2005
Hello I'm trying to create a simple textbox with a datepicker that appears when a user clicks inside of the it. I have the following loaded in my header:
您好，我正在尝试创建一个带有日期选择器的简单文本框，当用户在其中单击时会出现该文本框。我的标题中加载了以下内容：
<link rel="stylesheet" href="css/start/jquery-ui-1.8.13.custom.css">
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"> </script><!-- Was missing closing tag
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
And in my body, I have the following textbox:
在我的身体中，我有以下文本框：
<body>
<input id="datepicker" class="hasDatepicker" type="text">
</body>
My problem is that when I try to click inside the text box, nothing happens. I'm not sure what the problem might be. Any suggestions are appreciated.
我的问题是，当我尝试在文本框内单击时，没有任何反应。我不确定可能是什么问题。任何建议表示赞赏。
UPDATE:
更新：
Tried the CDN and also downloaded the entire jQuery UI package and still won't show. Tried in both IE and Firefox.
尝试了 CDN 并下载了整个 jQuery UI 包，但仍然无法显示。在 IE 和 Firefox 中都尝试过。
UPDATE 2:
更新 2：
Was hoping that syntax error I corrected above would fix it, but no dice.
希望我上面更正的语法错误能解决它，但没有骰子。
回答by Chris Peterson
jQuery UI adds the "hasDatepicker" class to the input after it is clicked. Try removing the hasDatepicker class. If you are using a jQuery selector such as $('.hasDatepicker') to select the input(s), try giving it another class name.
jQuery UI 在输入被点击后添加“hasDatepicker”类。尝试删除 hasDatepicker 类。如果您使用 jQuery 选择器（例如 $('.hasDatepicker') 来选择输入），请尝试给它另一个类名。
回答by Michelle Rodrigues
Please remove the class hasDatepicker from input tag and it should work fine.
请从输入标签中删除类 hasDatepicker ，它应该可以正常工作。
class = 'hasDatepicker' //Need to remove
回答by Jim Schubert
I had a similar problem.
我有一个类似的问题。
Open the stylesheet and find .ui-helper-hidden-accessible.
打开样式表并找到.ui-helper-hidden-accessible.
If there is a duplicate line for clip: rect(1px,1px,1px,1px);, remove it (you may need to remove both). This fixed the problem for me.
如果 有重复的行clip: rect(1px,1px,1px,1px);，请将其删除（您可能需要同时删除两者）。这为我解决了问题。
回答by Zachary
Use the CDN to test to make sure you have the complete jQuery UI. Your calling it right...
使用 CDN 进行测试以确保您拥有完整的 jQuery UI。你说得对...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" charset="utf-8"></script>
回答by Ryan
If you have multiple instances of the date picker try using a class rather than the ID, the reason being is the ID needs to be unique to the element or calling jQuery cannot run the function, this is because the function wont know what specific element on the page to place the script into.
如果您有多个日期选择器实例，请尝试使用类而不是 ID，原因是 ID 需要对元素唯一，或者调用 jQuery 无法运行该函数，这是因为该函数不知道具体的元素是什么放置脚本的页面。
The script would look like this
脚本看起来像这样
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
And the element would look like this
元素看起来像这样
<input id="myInput" class="datepicker hasDatepicker" type="text">
I hope this helps
我希望这有帮助
回答by jAntoni
I had the similar issue.
My resolution was to add z-indexin .date-pickerof datePicker.css
我有类似的问题。我的分辨率是增加z-index在.date-picker中datePicker.css
.date-picker {
position: absolute;
z-index:1000;/*********** MY Change *************/
font-size: 1em;
color: #CCC;
text-align: center;
cursor: default;
border: 1px solid #444;
border-radius: 2px;
margin: 6px 0;
background: #222;
box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);}
And with this change the Date Picker started displaying.
有了这个更改，日期选择器开始显示。
回答by Steve
I'm pretty sure you'll have fixed this by now but here are a few things I would have tried:
我很确定你现在已经解决了这个问题，但这里有一些我会尝试的事情：
Ensure you are grabbing jQuery followed by jQuery UI and a stylesheet for .datepicker exists.
确保您先获取 jQuery，然后是 jQuery UI，并且存在 .datepicker 的样式表。
Change it from looking for an ID to a class as datepicker puts its own ID in.
当 datepicker 将自己的 ID 放入时，将其从查找 ID 更改为类。
If it was on a click event make sure that a datepicker has not previously been applied to the element (so a new datepicker for each new element). E.G:
如果是在点击事件上，请确保之前没有将日期选择器应用于元素（因此每个新元素都有一个新的日期选择器）。例如：
$(".addOffer").click(function(){
//Code to add an offer (ensuring it has the class .latest)
$("#offers").append("<input type='text' name='datePicker' class='datepickerNew latest' />");
//Add date picker
$("#offers .latest.datepickerNew").datepicker().removeClass('latest');
});
