My project has a datepicker which has buttons to go previous/next months. it looks like this:

but when i click the buttons on 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 ment out onClose: and minDate but none of these fixed problem.

When i remove blur function on this datepicker, it stops disappearing. But i need to make it disappear when click anywhere out of this tool.

My project has a datepicker which has buttons to go previous/next months. it looks like this:

but when i click the buttons on 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 ment out onClose: and minDate but none of these fixed problem.

When i remove blur function on this datepicker, it stops disappearing. But i need to make it disappear when click anywhere out of this tool.

• javascript
• jquery
• datepicker

• can you share it in a fiddle? – Praveen Commented Sep 4, 2013 at 7:19

3 Answers 3

you should add a click event an check for all elements in your datepicker. this might 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');
        }

I think you are using two js files where your next button will override so try to change sequence of js file on your html page

I don't find this problem persist in my fiddle.

Since you mentioned,

When i remove blur function on this datepicker, it stops disappearing. But i need to make it disappear when click anywhere out of this tool?

I have a workaround solution like whenever you click outside the datepicker, it will be hidden.

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

Check this working in JSFiddle

Hope you can understand.