web-dev-qa-db-ja.com

jQuery UIの日付ピッカーが外側をクリックしても非表示にならない

私のサイトでjQuery UI Datepickerに問題が見つかりました。

入力をクリックすると、datepickerが正しく表示されます。それにもかかわらず、日付を選択せず​​に要素の外側をクリックするだけでは、期待どおりに日付ピッカーが非表示になりません。

Escキーを押すと消えます。1日を選択すると消えますが、外をクリックするとそのまま残ります。

問題を見つけることができる人はいますか？

リンク： http://pec.solarismedia.net/index.html#content

jqueryjquery-uidatepickerjquery-ui-datepicker
17
FilipBenes

あなたの日付ピッカーはクラス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"); 
});

1行として

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

私が遭遇した問題は、スパンアイコンがいつクリックされたのかを知ることができました、それは本当に協力したくなかったので、エクストラにはクラスチェックがあります

22
SpYk3HH

@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がすぐに閉じてできないため、ウェブページの日付ピッカーを再確認する必要があります日付を選択してください...

10
Jurijs Nesterovs

私が持っていたものよりも良い解決策をここでチェックしていますが、私の解決策が好きだと思います

$(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
Immanuel Comer

次/前月をクリックしたときにカレンダーを非表示にしない場合は、次のコードを適用します。

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

これは私のために働いた修正された解決策です：

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

上記のコードの短いバージョンですが、少し読みやすくなっています。

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

私は同じ問題を抱えていました。これは、最新の開発バージョンで対処および修正されているようです。これは、次の場所から入手できます。

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

動作しているように見えるデフォルトを使用しています。以前のバージョンにはバグがあったはずです。

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

これが私の解決策です：

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

これが私の解決策です。

以下では、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();
});
};
0
Emilion
$(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"/>
0
praveencs

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..
}   });
0
ayc