0

私は現在jQuery ui datepickerを使用しており、カレンダーを同位体プラグイン、より具体的にはdata-filter、つまり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>

また、jsfiddle の動作デモもここにあります
。datepicker を使用して番号付きブロックを除外することはまったく可能ですか?
どんな助けでも大歓迎です！

4

1 に答える 1

1

私はこれをもう一度見ました。

datepickerの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オブジェクトのインスタンスである2番目のパラメーターを使用できます。

DEMO01-カレンダーでクリックされた数と一致するボックスのみを表示する

私は遊んでいましたが、アイソトップのfilterオプションはセレクターでなければなりません。私の知る限り、値またはinnerHTMLを問い合わせるjQueryセレクターを生成することはできません。

ただし、次のように、同じ値を含む各ブロックにカスタム属性を追加できます。

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

これで、次のように、datepickerfilterのメソッドでの有効なセレクターを生成できます。OnSelect

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

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

DEMO02-データ属性を使用して日付ピッカーを同位体フィルターに接続する

リンク切れの場合のデモからのコード：

デモ-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>

デモ-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
    }


  });
});

デモ-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 + '"]'
  });
}

両方のデモで同じ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;
}
于 2013-01-25T23:05:47.753 に答える