JQuery DatePicker disappears when I click the Next / Previous buttons

Question

My project has a date picker that has buttons to go to previous / next months. it looks like this:

but when I click the buttons in the right and left corner of the control, it suddenly disappears.

Jquery function:

$( "#departDate" ).datepicker({ showOtherMonths: true, //inline:true, dateFormat: 'dd-mm-yy', numberOfMonths: 2, selectOtherMonths: true, minDate: 0, onClose: function (selectedDate) { $("#arriveDate").datepicker("option", "minDate", selectedDate); if (!single && $("#arriveDate").val()=="") $("#arriveDate").focus(); } }); 

I tried to comment onClose: and minDate , but none of these fixed issues.

When I remove the blur function on this datepicker, it stops fading. But I need to make it disappear when you click anywhere on this tool.

Answer 1

you must add a click event to check all the elements in your datepicker. this may be useful for you:

 $(document).on("click", function (e) { var elem = $(e.target); if (!elem.hasClass("hasDatepicker") && !elem.hasClass("ui-datepicker") && !elem.hasClass("ui-icon") && !elem.hasClass("ui-datepicker-next") && !elem.hasClass("ui-datepicker-prev") && !$(elem).parents(".ui-datepicker").length) { $('#departDate').datepicker('hide'); } 

Answer 2

I think you are using two js files where your next button will cancel so try changing the sequence of the js file on the html page

Answer 3

I do not find this problem in my fiddle .

Since you mentioned

When I remove the blur function on this datepicker, it stops fading. But do I need to make it disappear when you click anywhere from this tool?

I have a workaround , as if you clicked the datepicker button, it would be hidden.

 $(document).on('click',function (e) { var container = $("#departDate"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.hide(); } }); 

Note this while working in JSFiddle

Hope you can understand.