jquery-ui - 効かない - jqueryui datepicker parsedate




jquery入力がフォーカスを失ったときに日付ピッカーを閉じる (4)

入力内で日付ピッカーを使用しています。最後のフィールドは、フォーム内の別の入力にフォーカスを設定することを検証した後の日付ピッカー入力です。 。

別の入力フィールドにフォーカスを設定したときに日付ピッカーを閉じる方法 (私は.datepicker( "hide")を試しましたが、うまくいきませんでした)。

更新:これは私のコードです:

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

前もって感謝します。


質問最新バージョンのjqueryUIで動作するように編集されています

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

日付ピッカーが割り当てられている入力からフォーカスを外す関数を呼び出す場合は、次のものも呼び出す必要があります。

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

このコードは#test_dateの兄弟(〜)である日付ピッカーを隠しています。


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

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

動的にし、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 />


私のバージョンのjs:

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

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

});

私はそれがあなたを助けることを願っています





datepicker