9

我的页面上有多个，所有这些都附加了inputsjQuery 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属性。

有没有一种简单的方法可以实现这一目标？我查看了datepickerAPI，但没有遇到任何问题。

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

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

4

2 回答 2

11

在进行了更多搜索后，我遇到了这个问题，它帮助我解决了我的问题。

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

这是一个工作小提琴

于 2013-08-12T11:16:35.717 回答
1

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

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

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

尝试这个。

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

工作小提琴

从您的评论中，

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

更新小提琴

于 2013-08-12T11:00:55.067 回答