18

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

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

Escキーを押すと消え、日を選択すると消えますが、外側をクリックするとそこにとどまります。

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

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

4

13 に答える 13

23

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

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

于 2012-11-11T18:00:05.543 に答える
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() この行は私のために 機能しました。今、私にとっては、ポップアップする日付をクリックすると、Webページの日付ピッカーを再確認する必要があります。日付はすぐに閉じ、日付を選択することはできません...!$(elem).parents(".ui-datepicker").length.parent()div

于 2013-08-16T08:23:29.640 に答える
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"/>

于 2015-02-23T16:08:27.343 に答える
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"); 
});
于 2013-04-16T11:56:51.327 に答える
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);        
    });        
});
于 2014-01-16T14:52:31.320 に答える
1

上記のコードの短いバージョンを次に示します。少し読みやすくなっています。

$(document).click(function(e) { 
    if (!$(e.target).parents('.ui-datepicker').length)
        $('.hasDatepicker').datepicker('hide');
});
于 2013-02-06T00:25:52.557 に答える
1

これが私の解決策です：

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();
});
于 2014-11-15T10:03:06.997 に答える
0

これが私の解決策です..

以下に、if（）がマージされたこのコードがあります。

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（）

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();
});
};
于 2013-07-08T15:05:19.870 に答える
0

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

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

私はデフォルトを使用していますが、これは機能しているようです。以前のバージョンにはバグがあったに違いありません。

于 2013-09-23T15:45:26.803 に答える
0

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..
}   });
于 2013-12-16T08:34:13.307 に答える
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"/>

于 2015-11-26T13:37:19.777 に答える
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");
    }
});
于 2018-06-22T13:35:56.253 に答える
0

私はこの解決策を思いついた。別のソースから収集。この仕事は私のために。jquerydatepickerをポップアップするボタンがあります。日付ピッカーの外側のクリックでは閉じません。

<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>
于 2022-02-02T07:22:23.477 に答える