隐藏基于元素属性的ui-datepicker-calendar

Question

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

根据show/hide元素上的.ui-datepicker-calendar属性，我想要data-calendar input。

例如：

<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属性设置display属性。

有没有简单的方法来实现这一目标？我查看了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"]'));
  }
});

然后，只需在.ui-datepicker-calendar类中添加.hide-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

根据您的评论，

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

Updated Fiddle