Javascript jQuery UI 日期选择器不会显示 - 包含完整代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2820867/
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 UI datepicker will not display - full code included
提问by Bill Brasky
I am having trouble displaying the jQuery datepicker as shown here: http://jqueryui.com/demos/datepicker/
我在显示 jQuery 日期选择器时遇到问题，如下所示：http: //jqueryui.com/demos/datepicker/
I believe I downloaded all of the proper files, but to be certain, I started from scratch and ripped the demo site. Not all of it, but what I believed to be the important parts. The result is no datepicker to be shown and no javascript errors. Here is my full code sample:
我相信我下载了所有正确的文件，但可以肯定的是，我从头开始并翻录了演示站点。不是全部，但我认为是重要的部分。结果是没有显示日期选择器，也没有 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>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
jQuery("#datepicker").datepicker();
});
</script>
</head>
<body>
<input type="text" id="datepicker" class="hasDatepicker" />
</body>
</html>
Any help would be very much appreciated. Thanks!
任何帮助将不胜感激。谢谢！
回答by Raja
Please remove the class hasDatepickerfrom input tag and it should work fine.
请从输入标签中删除类hasDatepicker，它应该可以正常工作。
class = 'hasDatepicker' //Need to remove
回答by 0x2D9A3
If you look carefully at the source code of jQuery UI libyou can see that it uses hasDatepickerclass inside for datepicker. So, use any other class (even hasdatepickerworks) but not hasDatepicker:
如果您仔细查看jQuery UI lib的源代码，您会发现它使用hasDatepicker内部类作为日期选择器。因此，请使用任何其他类（甚至hasdatepicker有效），但不要使用hasDatepicker：
<input type="text" id="datepicker" class="anyOtherClassName"/>
or:
或者：
<input type="text" id="datepicker" class="hasdatepicker"/>
回答by heisenberg
Remove class="hasDatepicker"
删除 class="hasDatepicker"
回答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);}
That's it!!! And Lo the date picker started displaying. Hope this helps some one who'd come here for similar issues.
就是这样！！！Lo 日期选择器开始显示。希望这可以帮助那些来这里解决类似问题的人。
