检查datepicker是否已打开

Posted 2021-03-28

我有一个带有日期选择器的字段。我想知道它是否开放。我尝试过：

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

但它总是返回true。

我如何检查它是否打开？

答案

这可能是过去可能存在的错误。现在这个解决方案

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

工作得很好

另一答案

只需设置：

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

在您的CSS文件和代码中：

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

会正常工作！

另一答案

在我的脑海中，我可以想到使用为datepicker控件定义的beforeShow和onClose事件在某处切换类（或标志），并检查其存在以确定datepicker控件是否打开。

另一答案

访问datepicker的style属性，并在隐藏datepicker时将其与样式进行比较（display：none）：

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

另一答案

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

我已经使用这种方法在点击按钮时切换日期选择器。 isCalendarVisible相应地更新了'show'和'hide'的datepicker。我检查'isCalendarVisible'的值来手动打开或关闭它。

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