jQuery DatePicker disappears when i click Next/Previous buttons

Question

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

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 comment 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.

can you share it in a fiddle? – Praveen Sep 04 '13 at 07:19 — Praveen, Sep 04 '13 at 07:19

score 2 · Accepted Answer · answered Sep 04 '13 at 14:13

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');
        }

score 1 · Answer 2 · answered Sep 04 '13 at 07:14

1

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

answered Sep 04 '13 at 07:14

Mayur Patel

155
1
1
10

score 1 · Answer 3 · edited May 23 '17 at 12:01

1

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.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 04 '13 at 08:05

Praveen

55,303
33
133
164

but this hide mydatepicker completely. i just want to hide calendar, not input control. – AloneInTheDark Sep 04 '13 at 11:29

jQuery DatePicker disappears when i click Next/Previous buttons

3 Answers3