我在网站上发现了jQuery UI Datepicker的问题。
当我点击输入时，它确实显示datepicker。
然而，当我没有选择任何日期并且我只是在元素外部点击时，它不会像我期望的那样隐藏日期选择器。
当我按Esc时，它会消失，当我选择一天它消失但当我点击外面时它会停留在那里。
有没有人能够找到问题？
答案 0 :(得分：21)
你的日期选择器有hasDatepicker类，所以试试这个：
$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });
我99％肯定会有效！
而且仅供参考，如果您希望它是动态的（适用于之后创建的输入），您可以使用.on
$(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });
更新 （PS，使用以下内容从代码中完全删除上述内容）
要回答您的评论，以下可能不是最佳解决方案，但通过反复试验（在您的网站上，使用控制台）它可以正常工作！与我想到的其他方式相比，它相对较短。
$(document).click(function(e) {
var ele = $(e.toElement);
if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length)
$(".hasDatepicker").datepicker("hide");
});
作为一条线
$(document).click(function(e) { var ele = $(e.toElement); if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length) $(".hasDatepicker").datepicker("hide"); });
我遇到的问题是能够判断何时单击了跨度图标，它真的不想合作，因此额外有类检查
答案 1 :(得分：10)
我稍微修改了@SaraVanaN的代码，它看起来像这样：
$(document).on("click", function(e) {
var elem = $(e.target);
if(!elem.hasClass("hasDatepicker") &&
!elem.hasClass("ui-datepicker") &&
!elem.hasClass("ui-icon") &&
!elem.hasClass("ui-datepicker-next") &&
!elem.hasClass("ui-datepicker-prev") &&
!$(elem).parents(".ui-datepicker").length){
$('.hasDatepicker').datepicker('hide');
}
});
我更改了这一行$(document).on("click", function(e) {，但是如何使用.on("click")或.click()进行更改
这一行!$(elem).parents(".ui-datepicker").length我拍摄了.parent()
为我工作，你应该重新检查你的网页日期选择器，因为现在，对我来说，当你点击一个日期，弹出日期的div立即关闭，你不能选择任何日期......
答案 2 :(得分：3)
在这里查看比我更好的解决方案，但我认为我喜欢我的解决方案
$(function() {
$(".datepicker").datepicker();
$(".hasDatepicker, .ui-datepicker, .ui-datepicker-trigger").click(function(event) {
event.stopPropagation();
});
$("body").bind("click touchstart", function(event) {
$('.ui-datepicker').hide();
$('.hasDatepicker').blur();
});
});<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="datepicker"/>
答案 3 :(得分：2)
如果您想在点击下一个/上个月时不要隐藏日历，请应用以下代码..
$(document).click(function(e) {
var ele = $(e.toElement);
if (!ele.hasClass("hasDatepicker") &&
!ele.hasClass("ui-datepicker") &&
!ele.hasClass("ui-icon") &&
!ele.hasClass("ui-datepicker-next") &&
!ele.hasClass("ui-datepicker-prev") &&
!$(ele).parent().parents(".ui-datepicker").length)
$(".hasDatepicker").datepicker("hide");
});
答案 4 :(得分：2)
这是一个适用于我的修改后的解决方案：
$(".hasDatepicker").each(function (index, element) {
var context = $(this);
context.on("blur", function (e) {
// The setTimeout is the key here.
setTimeout(function () {
if (!context.is(':focus')) {
$(context).datepicker("hide");
}
}, 250);
});
});
答案 5 :(得分：1)
以上是上述代码的较短版本，更容易阅读：
$(document).click(function(e) {
if (!$(e.target).parents('.ui-datepicker').length)
$('.hasDatepicker').datepicker('hide');
});
答案 6 :(得分：0)
这是我的解决方案..
下面的您可以通过合并if（）s
找到此代码var datepickerHideFix = function() {
$(document).on("click", function (e) {
var elee = $(e.target);
if (!elee.hasClass('hasDatepicker')) {
if (elee.isChildOf('.ui-datepicker') === false) {
if (elee.parent().hasClass('ui-datepicker-header') === false) {
$('.hasDatepicker').datepicker('hide');
}
}
}
e.stopPropagation();
});
};
合并if（）s
var datepickerHideFix = function() {
$(document).on("click", function (e) {
var elee = $(e.target);
if (!elee.hasClass('hasDatepicker') &&
elee.isChildOf('.ui-datepicker') === false &&
elee.parent().hasClass('ui-datepicker-header') === false) {
$('.hasDatepicker').datepicker('hide');
}
e.stopPropagation();
});
};
答案 7 :(得分：0)
我遇到了同样的问题。看起来这是在最新开发版本中解决和修复的，您可以从这里获得：
http://eternicode.github.io/bootstrap-datepicker/
我正在使用默认设置，这似乎有效。早期版本中肯定存在错误。
答案 8 :(得分：0)
找到打开的日历所在的div。 就像我有：
div.className="calendar-box";
//我在“#container”元素
上有datepicker$（document）.unbind（'click'）。bind（“click”，function（e）{
if($(e.target).parents(".calendar-box").length == 0 && (e.target).id != 'container') { //code to hide calendar.. } });
答案 9 :(得分：0)
这是我的解决方案：
var datePickerHover = false;
$(document).on({
mouseenter: function (e)
{
datePickerHover = true;
},
mouseleave: function ()
{
datePickerHover = false;
}
}, ".datepicker");
$(document).on('mouseup','html',function()
{
if(datePickerHover == false) $('.datepicker').hide();
});
答案 10 :(得分：0)
$(function() {
$(".datepicker").datepicker();
$(".hasDatepicker, .ui-datepicker, .ui-datepicker-trigger").click(function(event) {
event.stopPropagation();
});
$("body").bind("click touchstart", function(event) {
$('.ui-datepicker').hide();
$('.hasDatepicker').blur();
});
});<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="datepicker"/>
答案 11 :(得分：0)
$("body").on("click", function (e) {
var elem = e.target.offsetParent;
if (elem &&
!elem.classList.contains("ui-datepicker") &&
!elem.classList.contains("ui-datepicker-calendar") &&
!elem.classList.contains("ui-datepicker-header") &&
!elem.hasAttribute("scope") &&
!elem.classList.contains("ui-datepicker-week-end") &&
!elem.classList.contains("input-cal-wrapper") &&
!elem.classList.contains("picto-cal")
) {
$(".hasDatepicker").datepicker("hide");
}
});