隐藏基于元素属性的ui-datepicker-calendar [英] Hide ui-datepicker-calendar based on element attribute

问题描述

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

I have multiple inputs on my page, all of which have jQuery UI's datepicker widget attached to them.

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

What I would like to do is show/hide the .ui-datepicker-calendar based on a data-calendar attribute on the input element.

例如:

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

因此，前两个不应显示.ui-datepicker-calendar，但最后一个应显示.

So, the first two should not show the .ui-datepicker-calendar, but the last should.

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

I thought I could leverage the beforeShow event to set the display of the element, however, at the time the event fires, the .ui-datepicker-calendar does not yet exist:

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

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

I've had a look at similar questions, and the answer is to use CSS to hide the .ui-datepicker-calendar element:

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

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

However, this won't work for me as I need to set the display property based on the element's data-calendar attribute.

有没有简单的方法可以做到这一点?我浏览了 datepicker API ，但没有发现任何问题.

Is there a simple way to achieve this? I had a look through the datepicker API but didn't come across anything.

推荐答案

进行了更多搜索之后，我遇到了

Having done some more searching, I came across this question which helped me solve my problem.

当beforeShow事件触发时，在#ui-datepicker-div元素上添加/删除一个类(附加日期选择器后就存在).

When the beforeShow event fires, add/remove a class on the #ui-datepicker-div element (this exists once the datepicker has been attached).

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

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

Then, just add a style for .ui-datepicker-calendar within the .hide-calendar class:

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

这篇关于隐藏基于元素属性的ui-datepicker-calendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！