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

Question

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

我想这样做是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 属性.

有没有一种简单的方法来实现这一目标？我查看了datepickerAPI,但没有遇到任何问题.

这是一个简单的基础小提琴

这是我希望它显示的方式,如果data-calendar是假的

Answer 1

做了一些搜索后,我遇到了这个帮助我解决问题的问题.

当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;
}

这是一个工作小提琴