CODEWITHSUNDEEP
jquery-uijquery-pluginsdatepicker
user590586
user590586

Reputation: 3050

jquery close datepicker when input lose focus

I'm using datepicker inside my input , my last field is the datepicker input , after validating it i want to set focus on another input inside my form , but the problem is the datepicker is not closed even taht it does not have the focus..

how can I close the datepicker when i set the focus on another input field? (I tried .datepicker("hide"); but it did not worked for me).

UPDATE: this is my code:

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

Thank's In Advance.

Upvotes: 15

Views: 66827

Answers (5)

Yahor M
Yahor M

Reputation: 797

My version of js:

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

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

});

I hope it's help you

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22570

To be dynamic, and using the class assigned by jQueryui you can do:

$(".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 />

Upvotes: 8

Mark W
Mark W

Reputation: 5964

Question Edited to work with the latest version of jqueryUI

JqueryUi auto-closes the datepicker when an element loses focus by user interaction, but not when changing focus with JS.

Where you are calling your function which removes focus from the input assigned a datepicker you also need to call:

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

This code is hiding the datepicker which is a sibling (~) of #test_date.

Upvotes: 21

user5040296
user5040296

Reputation: 1

This worked for me:

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

Upvotes: 0

Edward Olamisan
Edward Olamisan

Reputation: 891

Here's a modified solution that worked for me:

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

Upvotes: 3

Related Questions