Jquery close datepicker, когда вход потеряет фокус

Я использую datepicker внутри моего ввода, мое последнее поле - вход datepicker, после проверки его я хочу установить фокус на другом входе в мою форму, но проблема в том, что датапикер не закрыт, даже если он не имеет фокус..

как я могу закрыть datepicker, когда я устанавливаю фокус на другое поле ввода? (Я пробовал .datepicker( "скрыть" ), но это не сработало для меня).

UPDATE: это мой код:

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

Спасибо заранее.

Ответы

Ответ 1

Отредактированный вопрос для работы с последней версией jqueryUI

JqueryUi автоматически закрывает datepicker, когда элемент теряет фокус с помощью взаимодействия пользователя, но не при смене фокуса с помощью JS.

Если вы вызываете свою функцию, которая удаляет фокус с входа, назначенного datepicker, вам также нужно позвонить:

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

Этот код скрывает datepicker, который является родным (~) #test_date.

Ответ 2

Чтобы быть динамическим и использовать класс, назначенный 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 />

Ответ 3

Здесь измененное решение, которое сработало для меня:

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

Ответ 4

Моя версия js:

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

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

});

Я надеюсь, что это поможет вам

Ответ 5

Это сработало для меня:

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