单击外部时，jQuery UI 日期选择器不会隐藏

jQuery UI datepicker doesn't hide when click outside

提问by FilipBenes

I found a problem with jQuery UI Datepicker on my site.

我在我的网站上发现了 jQuery UI Datepicker 的问题。

When I click on the input, it does show a datepickerproperly. Nevertheless, when I don't select any date and I just click outside the element, it doesn't hide the datepicker as I'd expect.

当我单击输入时，它确实显示datepicker正确。然而，当我没有选择任何日期并且我只是在元素外部单击时，它不会像我期望的那样隐藏日期选择器。

When I press the Esc, it disappears, when I select a day it disappears but when I click outside it stays there.

当我按 Esc 时，它会消失，当我选择一天时它会消失，但是当我在外面单击时它会留在那里。

Is there anyone who is able to find the problem?

有没有人能够找到问题？

Link: http://pec.solarismedia.net/index.html#content

链接：http: //pec.solarismedia.net/index.html#content

回答by SpYk3HH

Your datepickers have the class hasDatepicker, so try this:

你的日期选择器有 class hasDatepicker，所以试试这个：

$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });

I'm 99% positive that will work!

我 99% 肯定会起作用！

And FYI, if you want it to be dynamic (apply to inputs created after), you can use .on

仅供参考，如果您希望它是动态的（适用于之后创建的输入），您可以使用 .on

$(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });

UPDATE^{(PS, to use the following completely remove the above from your code)}

更新^{（PS，要使用以下内容从您的代码中完全删除以上内容）}

To answer your comment, the following may not be the best solution, but through trial and error (on your site, using console) it works! And it's relatively short compared to alternate ways I thought of.

要回答您的评论，以下可能不是最佳解决方案，但通过反复试验（在您的网站上，使用控制台）它可以工作！与我想到的替代方式相比，它相对较短。

$(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"); 
});

As One Line

作为一行

$(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"); });

the problem i encountered was being able to tell when the span icon was clicked, it wasnt really wanting to cooperate, thus the extra has class checks

我遇到的问题是能够知道什么时候点击了跨度图标，它并不是真的想合作，因此额外的有类检查

回答by Jurijs Nesterovs

I slightly modified the code from @SaraVanaN and it looks like this:

我稍微修改了@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');
    }
});

i changed this line $(document).on("click", function(e) {but it doesn't matter how you do it with .on("click")or .click()and this line !$(elem).parents(".ui-datepicker").lengthi took of .parent()worked for me, you should recheck your webpages datepicker, because right now, for me, when you click on a date the divwhich pops up with dates closes instantly and you can't choose any of the dates...

我改变了这条线，$(document).on("click", function(e) {但不管你怎么做，.on("click")或者.click()这条线!$(elem).parents(".ui-datepicker").length我.parent()为我工作，你应该重新检查你的网页日期选择器，因为现在，对我来说，当你点击一个日期时，div它会弹出日期会立即关闭，您无法选择任何日期...

回答by Immanuel Comer

Checking here for better solutions than what I had, but I think I like my solution

在这里检查比我拥有的更好的解决方案，但我想我喜欢我的解决方案

$(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"/>

回答by Edward Olamisan

Here's a modified solution that worked for me:

这是一个对我有用的修改后的解决方案：

$(".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);        
    });        
});

回答by SaraVanaN

If you want do not hide calendar when you click next/prev month apply following code..

如果您不想在单击下一个/上一个月份时隐藏日历，请应用以下代码..

$(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"); 
});

回答by blented

Here is a shorter version of the above code, bit easier to read:

这是上述代码的较短版本，更容易阅读：

$(document).click(function(e) { 
    if (!$(e.target).parents('.ui-datepicker').length)
        $('.hasDatepicker').datepicker('hide');
});

回答by Emilion

This is my solution ..

这是我的解决方案..

below You may find this code with merged if()s

下面你可能会发现这个代码合并了 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();
});
};

Merged if()s

合并 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();
});
};

回答by h0mayun

Here is my solution:

这是我的解决方案：

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();
});

回答by zxbEPREF

I was having the same issue. It looks like this is addressed and fixed in the latest development version, which you can get from here:

我遇到了同样的问题。看起来这在最新的开发版本中得到解决和修复，您可以从这里获得：

http://eternicode.github.io/bootstrap-datepicker/

http://eternicode.github.io/bootstrap-datepicker/

I'm using the defaults, which seem to work. There must've been a bug in the earlier version(s).

我正在使用默认值，这似乎有效。早期版本中一定存在错误。

回答by ayc

in init method for calendar initialization in js file find the div in which your opened calendar is there. Like i have :

在 js 文件中日历初始化的 init 方法中，找到您打开的日历所在的 div。就像我有：

div.className="calendar-box";

//i am having datepicker on "#container" element

//我在“#container”元素上有日期选择器

$(document).unbind('click').bind("click", function (e) {

if($(e.target).parents(".calendar-box").length == 0 && (e.target).id != 'container')
{
       //code to hide calendar..
}   });                 

$(document).unbind('click').bind("click", function (e) {

if($(e.target).parents(".calendar-box").length == 0 && (e.target).id != 'container')
{
       //code to hide calendar..
}   });