检查日期选择器是否打开答案

【问题标题】：Check if datepicker is open检查日期选择器是否打开
【发布时间】：2011-02-16 07:37:57
【问题描述】：

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

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

但它总是返回 true。

如何检查它是否打开？

【问题讨论】：

标签： jquery-ui datepicker

【解决方案1】：

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

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

完美运行

【讨论】：

第一次将日期选择器附加到元素时，它是不可见的，但可见返回 true。该元素还没有 display none 样式，但它仍然是隐藏的，不幸的是，在您的代码中没有检测到。仍然，+1。 :)
啊，第一次加载时，你应该检查它是否为:empty。
对我不起作用。 :empty 和 :visible 总是返回 true - 在第一次打开日期选择器之前和之后。
请注意，如果您有多个绑定了日期选择器的输入，那么当显示其中任何一个时，这将返回 true（实际上它们都是相同的 div 元素），所以这实际上不会告诉您#filter_date 的日期选择器是否处于活动状态

【解决方案2】：

简单设置：

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

在您的 CSS 文件和您的代码中：

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

会正常工作！

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

我已经使用这种方法在单击按钮时切换日期选择器。 isCalendarVisible 相应地更新日期选择器的“显示”和“隐藏”。我检查“isCalendarVisible”的值以手动打开或关闭它。

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

【讨论】：

【解决方案5】：

访问日期选择器的样式属性，并与隐藏日期选择器时的样式进行比较（显示：无）：

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

【讨论】：

当您需要测试元素是否可见并且您在 phantomJS 上运行测试（.is(":visible") 对我不起作用）时，这个实际上很好

【解决方案6】：

这样做。

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

【讨论】：