jquery - 单击外部时，jQuery UI datepicker 不会隐藏

Question

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

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

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

有没有人能够找到问题？

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

Answer 1

你的 datepickers 有 class 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"); });

我遇到的问题是能够判断单击跨度图标的时间，它并不是真的想要合作，因此额外的有类检查

Answer 2

我稍微修改了@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弹出的日期时日期立即关闭，您无法选择任何日期...

Answer 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"/>

Answer 4

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

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

Answer 5

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

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

Answer 6

这是我的解决方案：

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

Answer 7

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

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

Answer 8

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

div.className="calendar-box";

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

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

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

Answer 9

这是我的解决方案..

下面您可能会发现此代码与合并的 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();
});
};

Answer 10

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

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

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

Answer 11

我想出了这个解决方案。从另一个来源收集。这对我有用。我有一个弹出 jquery datepicker 的按钮。并且不会在日期选择器的外部点击时关闭。

<script>
var mouse_is_inside = false;

$(document).ready(function () {        
    $('#j-calender').hover(function(){ 
      mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.ui-datepicker').hide();
    });
});
</script>

Answer 12

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

Answer 13

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