单击外部时，jQuery UI datepicker不会隐藏
我在我的网站上发现了jQuery UI Datepicker的问题。
当我点击输入时，它确实显示了一个日期选择器。 然而，当我没有选择任何日期并且我只是在元素外部点击时，它并没有像我期望的那样隐藏日期选择器。
当我按Esc时，它会消失，当我选择一天时它会消失但是当我点击外面它会停留在那里。
有没有人能够找到问题？
提前致谢 ：）
链接： http ： //bit.ly/SFeuzp
你的hasDatepicker有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"); });
我遇到的问题是能够告诉单击跨度图标的时间，它真的不想合作，因此额外的有类检查
我稍微修改了@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()为我工作，你应该重新检查你的网页datepicker，因为现在，对我来说，当你点击日期时弹出的div日期立即关闭，你不能选择任何日期……
在这里查看比我更好的解决方案，但我想我喜欢我的解决方案
$(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(); }); });
如果您希望在单击下一个/上个月时不隐藏日历，请应用以下代码。
$(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"); });
这是一个适合我的修改后的解决方案：
$(".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); }); });
以下是上述代码的较短版本，更易于阅读：
$(document).click(function(e) { if (!$(e.target).parents('.ui-datepicker').length) $('.hasDatepicker').datepicker('hide'); });
这是我的解决方案..
您可以在合并的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(); }); };
我遇到了同样的问题。 看起来这是在最新开发版本中解决和修复的，您可以从这里获得：
http://eternicode.github.io/bootstrap-datepicker/
我正在使用默认设置，这似乎有效。 早期版本中肯定存在错误。
在js文件中的日历初始化的init方法中，找到打开的日历所在的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.. } });
这是我的解决方案：
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(); });
$(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(); }); });
$("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"); } });