Question jquery fermer datepicker lorsque l'entrée perd le focus


J'utilise datepicker dans mon entrée, mon dernier champ est l'entrée datepicker, après l'avoir validé je veux mettre l'accent sur une autre entrée dans mon formulaire, mais le problème est que le pointeur n'est pas fermé même s'il n'a pas le focus. .

Comment puis-je fermer le datepicker lorsque je mets l'accent sur un autre champ de saisie? (J'ai essayé .datepicker ("hide"), mais cela n'a pas fonctionné pour moi).

METTRE À JOUR: c'est mon code:

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

Merci d'avance.


13
2018-02-27 17:16


origine


Réponses:


Question édité travailler avec la dernière version de jqueryUI

JqueryUi ferme automatiquement le datepicker lorsqu'un élément perd le focus par interaction de l'utilisateur, mais pas lors de la modification du focus avec JS.

Lorsque vous appelez votre fonction, ce qui supprime le focus de l'entrée à laquelle est attribué un datepicker, vous devez également appeler:

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

Ce code cache le datepicker qui est un frère (~) de #test_date.


20
2018-03-01 12:48



Pour être dynamique et utiliser la classe assignée par jQueryui, vous pouvez faire:

$(".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
2017-11-11 20:33



Voici une solution modifiée qui a fonctionné pour moi:

$(".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
2018-01-16 14:54



Ma version de js:

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

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

});

J'espère que ça t'aide


1
2017-07-11 13:30



Cela a fonctionné pour moi:

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

0
2018-06-23 12:42