web-dev-qa-db-fra.com

jquery close 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ée, je souhaite définir le focus sur une autre entrée dans mon formulaire, mais le problème est que le sélecteur date n'est pas fermé même s'il n'a pas le focus. . 

comment puis-je fermer le sélecteur de date lorsque je mets l'accent sur un autre champ de saisie? (j'ai essayé .datepicker ("hide"); mais cela n'a pas fonctionné pour moi).

UPDATE: 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.

jquery-uijquery-pluginsdatepicker
13
user590586

Question Edited pour travailler avec la dernière version de jqueryUI 

JqueryUi ferme automatiquement le sélecteur de date lorsqu'un élément perd le focus par interaction de l'utilisateur, mais pas lorsqu'il change de focus avec JS.

Où vous appelez votre fonction qui supprime le focus de l'entrée affectée à un sélecteur de date que vous devez également appeler:

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

Ce code cache le sélecteur de date qui est un frère (~) de #test_date. 

20
Mark W

Pour être dynamique, et en utilisant la classe attribué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
SpYk3HH

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
Edward Olamisan

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
Yahor M

Cela a fonctionné pour moi:

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