根据元素属性隐藏 ui-datepicker-calendar

Question

我的页面上有多个inputs，所有这些都附加了jQuery UI 的datepicker 小部件。

我想做的是基于input 元素上的data-calendar 属性的show/hide .ui-datepicker-calendar。

例如：

<input type="text" data-calendar="false" />
<input type="text" data-calendar="false" />
<input type="text" data-calendar="true" />

所以，前两个不应该显示.ui-datepicker-calendar，但最后一个应该。

我想我可以利用beforeShow 事件来设置元素的显示，但是，在事件触发时，.ui-datepicker-calendar 还不存在：

$('input').datepicker({
  beforeShow: function(el, dp) {
    $('.ui-datepicker-calendar').toggle( !$(el).is('[data-calendar="false"]') );
  }
});

我看过类似的问题，答案是使用CSS隐藏.ui-datepicker-calendar元素：

.ui-datepicker-calendar {
  display: none;
}

但是，这对我不起作用，因为我需要根据元素的 data-calendar 属性设置显示属性。

有没有一种简单的方法来实现这一点？我查看了datepicker API，但没有发现任何东西。

Here's a simple base fiddle

Here's how I would like it to display, if data-calendar is false

Answer 1

在进行了更多搜索后，我发现了this question，它帮助我解决了我的问题。

当beforeShow 事件触发时，在#ui-datepicker-div 元素上添加/删除一个类（一旦附加了日期选择器，它就会存在）。

$('input').datepicker({
  beforeShow: function(el, dp) {
    $('#ui-datepicker-div').toggleClass('hide-calendar', $(el).is('[data-calendar="false"]'));
  }
});

然后，只需在 .hide-calendar 类中为 .ui-datepicker-calendar 添加样式：

.hide-calendar .ui-datepicker-calendar {
  display: none;
}

Here's a working fiddle

Answer 2

检查每个输入元素的数据属性。

1) .data() - 用于存储与匹配元素关联的任意数据的方法。

2) .each() - 用于迭代 jQuery 对象的方法。

试试这个。

$('input[type=text]').each(function(){
    alert($(this).data('calendar'));
    if($(this).data('calendar')){
        $(this).datepicker();
    }
});

Working Fiddle

来自您的 cmets，

$('input').datepicker();
$('input[type=text]').each(function () {
    if ($(this).data('calendar')) {
        $(this).datepicker();
    }
    else{
        $(this).datepicker('destroy');  //Removes the datepicker functionality 
    }
});

Updated Fiddle