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\")

<

Answer 1

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

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

works perfectly

Answer 2

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

Answer 3

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

Answer 4

Simply set:

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

in your CSS file and your code:

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

will work correctly!

Answer 5

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

Answer 6

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.