Check if datepicker is open

Question

I have a field with a datepicker. I want know if it is open. I've tried with:

$("#filter_date").datepicker( "widget" ).is(":visible")

but it returns always true.

How can I check if it's open?

score 36 · Accepted Answer · answered Mar 30 '11 at 10:21

36

This might be a possible bug in the past. Now this solution

$("#filter_date").datepicker( "widget" ).is(":visible")

works perfectly

answered Mar 30 '11 at 10:21

dr3w

976
2
12
21

1

The first time the datepicker is attached to an element, it is invisible and yet visible returns true. The element doesn't have yet the display none style but it's still hidden, and unfortunately, not detected in your code. Still, +1. :) – mikong Aug 04 '11 at 07:25
2

Ahh, on first load, you should check if it's :empty. – mikong Aug 04 '11 at 07:31
Doesn't work for me. Both :empty and :visible always return true - before the first time the datepicker is opened and always afterward. – N73k Nov 01 '17 at 23:52
beware of the fact that if you have multiple inputs with datepickers bound to them, this will return true when any of them is displayed (it's actually the same div element for all of them), so this actually does not tell if you the datepicker for #filter_date is being active – sKopheK Jun 10 '18 at 18:04

score 11 · Answer 2 · answered Nov 13 '12 at 14:36

11

Simply set:

#ui-datepicker-div { display: none; }

in your CSS file and your code:

$("#filter_date").datepicker( "widget" ).is(":visible")

will work correctly!

answered Nov 13 '12 at 14:36

jQuery Italia

121
1
2

score 4 · Answer 3 · edited Apr 17 '13 at 07:13

4

Off the top of my head, I could think of using the beforeShow and onClose events defined for the datepicker control to toggle a class (or a flag) somewhere, and checking the presence of which to determine whether the datepicker control is open or not.

edited Apr 17 '13 at 07:13

Chris

3,282
1
31
35

answered May 06 '10 at 09:29

ayaz

10,178
6
32
48

score 3 · Answer 4 · answered Dec 21 '17 at 07:47

   var isCalendarVisible;     
   $(".datepicker).datepicker().on("show", function () {
          isCalendarVisible = true;
    }).on("hide", function () {
          isCalendarVisible = false;
    });

I have used this approach for toggling of date-picker on clicking of a button. isCalendarVisible getting updated on 'show' & 'hide' of datepicker accordingly. I check value of 'isCalendarVisible' to open or close it manually .

    function toggleCalendar() {
        if (isCalendarVisible) {
            $(".datepicker .add-on").datepicker("hide");
        } else {
            $(".datepicker .add-on").datepicker("show");
        }
    }

score 1 · Answer 5 · answered Dec 01 '14 at 15:46

1

Access the datepicker's style attribute and compare it with a style when datepicker is hidden (display: none):

var datePickerStyle = $('.datepicker').attr('style');
var noneStyle = 'display: none;';
if(datePickerStyle.indexOf(noneStyle) != -1){
     console.log('shown');
} else {
     console.log('not shown');
}

answered Dec 01 '14 at 15:46

Dario Sagud

71
1
5

This one is actually good when you need to test if element is visible, and you run tests on phantomJS (.is(":visible") didn't work for me) – Vitaliy Lebedev Jul 15 '15 at 22:41

score 1 · Answer 6 · edited Dec 12 '19 at 09:17

Do it like this.

$('.inputCalendar').datepicker({
    dateFormat: "yy-mm-dd",
    monthNames: [ "01","02","03","04","05","06","07","08","09","10","11","12" ],
    monthNamesShort: [ "1","2","3","4","5","6","7","8","9","10","11","12" ],
    dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
    dayNamesShort: ["(Sun)", "(Mon)", "(Tue)", "(Wed)", "(Thur)", "(Fri)", "(Sat)"],
    yearSuffix: ".",
    showMonthAfterYear: true,
    autoSize: true,
    minDate : dateMin(),
    maxDate : dateMax(),
    beforeShow : function(){ //show
        $('.date').addClass('active');          
    },
    onClose: function(){ //hide
        $('.date').removeClass('active');
    }
});

Check if datepicker is open

6 Answers6

Linked