Question

我正在使用jQuery ui datepicker，我正在试图弄清楚是否可以将日历与同位素插件结合起来，更具体地说是数据过滤器，即从日期选择器中选择日期并过滤掉相关事件（在该日期）这是我的一些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
那么是否可以使用datepicker过滤掉编号的块？
任何帮助将不胜感激！

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 - 仅显示与日历中点击的数字相匹配的框

我玩了一下，并且同位素的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>

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

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

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

DEMO 02 - 使用数据属性将datepicker连接到同位素过滤器

链接腐烂时来自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: '&rarr;',
    //prevText: '&larr;',
    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;
}

结合jQuery ui datepicker和同位素数据过滤器

1 个答案: