jQuery DatePicker 未显示
[英]jQuery DatePicker not showing
问题描述
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:我在 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.尝试了 CDN，还下载了整个 jQuery UI package 仍然不会显示。 Tried in both IE and Firefox.在 IE 和 Firefox 中都试过了。
UPDATE 2:更新 2：
Was hoping that syntax error I corrected above would fix it, but no dice.希望我在上面纠正的语法错误可以解决它，但没有骰子。
9 个解决方案
解决方案1
23 2012-12-26 20:26:21
jQuery UI adds the "hasDatepicker" class to the input after it is clicked. jQuery UI 在点击后将“hasDatepicker”class 添加到输入。 Try removing the hasDatepicker class.尝试删除 hasDatepicker class。 If you are using a jQuery selector such as $('.hasDatepicker') to select the input(s), try giving it another class name.如果您使用 jQuery 选择器，例如 $('.hasDatepicker') 到 select 输入，请尝试给它另一个 class 名称。
解决方案2
4 2016-05-04 11:54:51
Please remove the class hasDatepicker from input tag and it should work fine.请从输入标签中删除 class hasDatepicker，它应该可以正常工作。
class = 'hasDatepicker' //Need to remove
解决方案3
3 2011-06-09 23:03:07
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);如果clip: rect(1px,1px,1px,1px); , remove it (you may need to remove both). , 删除它（您可能需要同时删除两者）。 This fixed the problem for me.这解决了我的问题。
解决方案4
0 2013-06-27 12:31:42
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，并且存在一个样式表 for.datepicker。
Change it from looking for an ID to a class as datepicker puts its own ID in.将其从查找 ID 更改为 class，因为 datepicker 将其自己的 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).如果它是在单击事件上，请确保之前没有将日期选择器应用于元素（因此每个新元素都有一个新的日期选择器）。 EG:例如：
$(".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');
});
解决方案5
0 2017-11-13 07:45:58
I had the similar issue.我有类似的问题。 My resolution was to add z-index in .date-picker of datePicker.css我的解决方案是在.date-picker datePicker.css中添加z-index
.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.有了这个更改，日期选择器开始显示。
解决方案6
0 2011-06-09 22:48:26
Use the CDN to test to make sure you have the complete jQuery UI.使用 CDN 进行测试以确保您拥有完整的 jQuery UI。 Your calling it right...你说的对...
<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>
解决方案7
0 2011-06-09 23:06:20
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. 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 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我希望这有帮助
解决方案8
0 2020-09-30 07:47:41
find and remove it if you has something like this!如果您有类似的东西，请找到并删除它！
.ui-datepicker-calendar {
display: none;
}
解决方案9
0 2021-04-27 19:09:37
This is super old but I ran into the issue and came up with an elegant solution based on the jQuery documentation.这是超级旧的，但我遇到了这个问题，并根据 jQuery 文档提出了一个优雅的解决方案。 Using the onClose event built in the datePicker api, I just remove the hasDatepicker class.使用 datePicker api 中内置的 onClose 事件，我只需删除 hasDatepicker class。
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
onClose: function() {
$(this).removeClass("hasDatepicker");
}});
Keep in mind, that ideally you have a unique id for each element, sometimes this is not possible.请记住，理想情况下，每个元素都有一个唯一的 id，有时这是不可能的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.