结合 jQuery ui 日期选择器和同位素数据过滤器

Question

我目前正在使用 jQuery ui 日期选择器，我正在尝试确定是否可以将日历与同位素插件（更具体地说是数据过滤器）结合起来，即从日期选择器中选择日期并过滤掉相关事件（在该日期）。
这是我的一些html：

<div id="datepicker"></div>

<div id="block-wrap">
    <div class="blocks">1</div>
    <div class="blocks">3</div>
    <div class="blocks">2</div>
    <div class="blocks">2</div>
    <div class="blocks">3</div>
    <div class="blocks">1</div>
    <div class="blocks">3</div>
    <div class="blocks">2</div>
    <div class="blocks">1</div>    
</div>

Also a working demo on jsfiddle here too
那么是否有可能使用日期选择器过滤掉编号的块？
任何帮助将不胜感激！

Answer 1

我确实又看了一遍。

您可以使用日期选择器的onSelect() 方法并附上这个：

onSelect: function (dateText, inst) {
  var date = $(this).datepicker('getDate');
  //var dayValue = date.getDate(); // or
   var dayValue = inst.selectedDay;


  $blocks.show();

  $blocks.filter(function () {
    if (this.innerHTML != dayValue) {
      $(this).hide();
    }
  });
}

您可以使用第一个函数参数来保存您单击的日期的字符串版本，或者您可以使用第二个参数，它是 datepicker 对象的一个​​实例，具有日期元素的有用属性值。

---

DEMO 01 - 仅显示与日历中点击的数字匹配的框

---

我玩了一下，isotop 的filter 选项必须是一个选择器。据我所知，您无法生成 jQuery 选择器询问值或 innerHTML。

但是，您可以为每个包含相同值的块添加自定义属性，类似于：

<div class="blocks" data-value="1">1</div>
<div class="blocks" data-value="3">3</div>
<div class="blocks" data-value="2">2</div>

现在，您可以在日期选择器的OnSelect 方法中为filter 生成一个有效的选择器，如下所示：

onSelect: function (dateText, inst) {
  var date = $(this).datepicker('getDate');
  var dayValue = inst.selectedDay;

  $container.isotope({
    filter: '[data-value="' + dayValue + '"]'
  });
}

---

DEMO 02 - 使用数据属性将日期选择器连接到同位素过滤器

---

来自 DEMO 的代码在链接腐烂的情况下：

---

DEMO-01：HTML

<div id="datepicker"></div>
<div id="block-wrap">
  <div class="blocks">1</div>
  <div class="blocks">3</div>
  <div class="blocks">2</div>
  <div class="blocks">2</div>
</div>

DEMO-01：脚本

var $blocks = $("div.blocks", "#block-wrap");

$(function () {
  $('#datepicker').datepicker({
    inline: true,
    //nextText: '→',
    //prevText: '←',
    showOtherMonths: true,
    //dateFormat: 'dd MM yy',
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    //showOn: "button",
    //buttonImage: "img/calendar-blue.png",
    //buttonImageOnly: true,
    onSelect: function (dateText, inst) {
      var date = $(this).datepicker('getDate');
      var dayValue = date.getDate();

      $blocks.show();

      $blocks.filter(function () {
        if (this.innerHTML != dayValue) {
          $(this).hide();
        }
      });
    }
  });
});


var $container = $('#block-wrap');

$container.imagesLoaded(function () {
  $container.isotope({
    itemSelector: '.blocks',
    animationEngine: 'css',
    masonry: {
      columnWidth: 5
    }


  });
});

DEMO-02：HTML

<div id="datepicker"></div>
<div id="block-wrap">
  <div class="blocks" data-value="1">1</div>
  <div class="blocks" data-value="3">3</div>
  <div class="blocks" data-value="2">2</div>
  <div class="blocks" data-value="2">2</div>
  <div class="blocks" data-value="1">1</div>
</div>

DEMO 02 - 脚本（与 DEMO 01 脚本相比，仅 onSelect 发生了变化）

onSelect: function (dateText, inst) {
  var date = $(this).datepicker('getDate');
  var dayValue = inst.selectedDay;
  $container.isotope({
    filter: '[data-value="' + dayValue + '"]'
  });
}

两个 DEMO 的 CSS 相同

#datepicker {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 9999;
}
#block-wrap {
  position: absolute;
  padding-left: 230px;
  top: 10px;
  width: auto;
}
.blocks {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: silver;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  z-index: 1;
}
.isotope, .isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}