web-dev-qa-db-ja.com

入力がフォーカスを失ったときにjqueryがdatepickerを閉じる

入力内で日付ピッカーを使用しています。最後のフィールドは日付ピッカー入力です。検証した後、フォーム内の別の入力にフォーカスを設定したいのですが、問題は、日付ピッカーがフォーカスを持たなくても閉じられないことです。 。

別の入力フィールドにフォーカスを設定したときに日付ピッカーを閉じるにはどうすればよいですか？ （.datepicker（ "hide"）;を試しましたが、うまくいきませんでした）。

PDATE：これは私のコードです：

$(function()
    {    $( "#test_date" ).datepicker({
                dateFormat: "dd/mm/yy"
        });
        });
 //when i call my function:
 $( "#test_date" ).datepicker("hide"); //---> this does not work!

前もって感謝します。

jquery-uijquery-pluginsdatepicker
14
user590586

Question Edited jqueryUIの最新バージョンで動作します

JqueryUiは、要素がユーザーの操作によってフォーカスを失ったときに日付ピッカーを自動的に閉じますが、JSでフォーカスを変更したときは閉じません。

日付ピッカーを割り当てられた入力からフォーカスを削除する関数を呼び出す場所も呼び出す必要があります。

 $("#test_date ~ .ui-datepicker").hide();

このコードは、＃test_dateの兄弟（〜）である日付ピッカーを隠しています。

21
Mark W

動的にするには、jQueryuiによって割り当てられたクラスを使用して、次のことができます。

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

;(function() {
        function eventOnFocusDP(e, par) {
                if (par.ver == $.fn.jquery) {
                        if (this.tmr) clearTimeout(this.tmr);
                        par.lbl1.text(par.msgs[1]);
                        this.tmr = setTimeout(function() { par.inpNP.focus(); }, par.secs*1e3);
                }
        }
        
        function eventOnFocusNP(e, par) {
                if (par.ver == $.fn.jquery) {
                        par.lbl1.text(par.msgs[0]);
                        par.lbl2.text(par.msgs[2]);
                }
        }
        
        function eventOnBlurNP(e, par) {
                if (par.ver == $.fn.jquery) par.lbl2.text("");
        }
        
        function eventOnBlurHDP(e, par) {
                if (par.ver == $.fn.jquery) {
                        $(this).off("focus").datepicker("hide");
                }
        }
        
        function test(secs) {
                this.ver = $.fn.jquery;
                
                this.secs = (typeof secs)=='number'?secs:2;
                this.msgs = [
                                'This will lose focus to box below '+this.secs+' seconds after it gains focus.',
                                'Losing focus in '+this.secs+' seconds!',
                                'Focus now on bottom box.'
                        ];
                
                this.inpDP = $('[name=datePicker]');
                this.inpNP = $('[name=nextPicker]');
                this.lbl1 = $('#dPMsg').text(this.msgs[0]);
                this.lbl2 = $('#dPMsg2');
                var par = this;
                
                this.inpDP.datepicker({ dateFormat: "dd/mm/yy" })
                        .on('focus', function(e) { eventOnFocusDP.apply(this, [e, par]) });
                this.inpNP.on('focus', function(e) { eventOnFocusNP.apply(this, [e, par]) });
                this.inpNP.on('blur', function(e) { eventOnBlurNP.apply(this, [e, par]) });
                $(document).on('blur', '.hasDatepicker', function(e) { eventOnBlurHDP.apply(this, [e, par]) });
                return this;
        }
        
        function init() {
                window.Test = test;
                setTimeout(function() {
          $(document).on('change', '.switcher, .switcher-ui', function(e) { if (window.Test) new Test(); });
          $(jQueryUISwitcher).trigger('change');
        }, 1e3);
        }
        
        if (document.readyState == "complete") init();
        else jQuery(window).on('load', init);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/JDMcKinstry/cfc32292cbbfa548fb9584db05b2b2fc/raw/4f16f7ee441dfb98aa166a2e84193b14574a46d1/jquery.switcher.js"></script>
<form action="javascript: void 0">
  <input type="text" name="datePicker" id="dP" placeholder="mm/dd/yyyy" />
  <label for="dP" id="dPMsg"></label>
  <hr />
  <input type="text" name="nextPicker" placeholder="tab to here" />
  <label for="dP" id="dPMsg2"></label>
</form>
<hr />
<hr />
<hr />
9
SpYk3HH

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

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

私のバージョンのjs：

<script type="text/javascript"> $(function () {   

    $("#dtp1").on("dp.change", function (e) {    
        $('#dtp1').data("DateTimePicker").hide();
    });

});

お役に立てば幸いです

1
Yahor M

これは私のために働きました：

$("#datepickerTo").datepicker({
    onSelect: function () {
        $(this).off( "focus" );
    }        
});
0
user5040296