最善のアプローチは、特定の日付範囲内

Question

ユースケースを/非表示要素を表示します2つの日付が与えられました。

どうやってこれをやりますか？

"date"または "timestamp"のセレクタを各要素に適用し、DatePicker Rangeのすべての要素をループすることを考えています。

これはあなたにとって意味がありますか、誰かがこれについての例を持っていますか？ 私の脳は現在フリーズモードです。私はいくつかのインスピレーションを使用することができます。

Answer 1

これは私が使用して終了コードです：

HTML：

<li id="xxx" rel="<?=strtotime($row['date'])?>"> 
    some content 
</li> 

のjQuery：

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    //range defined by datepicker 

    $(".range").change(function(e){ 
     var tfrom = new Date($('#from').val()).getTime()/1000; 
     var tto = new Date('$('#to').val()).getTime()/1000; 

     $('li').filter(function(){ 
      var rel = $(this).attr('rel'); 
      var flag = false; 

      if(rel > tto || rel < tfrom){ 
       flag = true; 
      } 
      return flag; 
     }).hide(); 
    }); 
});  
</script> 

それはすべきであるとしてexaclty動作します。再度、感謝します！

Answer 2

私は個人的にVueJs（またはAngularJsなどの別のフレームワーク）を使用します。 v-ifディレクティブを使用すると非常に簡単に実装できます。

vueJsのコードスニペットはサポートされていないため、ここでは動作例を書いています。 2017-03-03 & & 2018-03-3は、デモの目的でランダムな日付です。あなたは本当にvueJsを使用してループを作り、コードあなたには、いくつかの計算されたプロパティを使用して実装を変更する必要があります。もちろん、

# html 
<div id="app"> 
    <span v-if="'2017-03-03' >= dateFrom && '2017-03-03' <= dateTo"> 
    You see me 
    </span> 
    <span v-if="'2018-03-03' >= dateFrom && '2018-03-03' <= dateTo"> 
    Not see me 
    </span> 
</div> 

# vueJs 
var app = new Vue({ 
    el: '#app', 
    data: { 
    dateFrom: '2017-01-01', 
    dateTo: '2017-01-01' 
    } 
}) 

の10行ですべて1000個の要素を扱うが、これは道を開くために十分であることができます。

あなたはあなたが私はそれが役に立てば幸い、あなたに意味をなすhere

のレンダリングリストについての情報を見つけることができ、このpage

で条件付きのレンダリングに関する情報を見つけることができます！

Answer 3

"フィルタ"機能を使用する方が良いです。

ループを使用しないで、独自の戻り値を定義することができます。

$(function() { 
 
    $("div[id]").filter(function(){ 
 
     var code = +$(this).prop("id").split("_")[1]; 
 
     var flag = false; 
 
     
 
     if(code > 4){ 
 
     flag = true; 
 
     } 
 
     
 
     return flag; 
 
    }).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test_1">1<div> 
 
<div id="test_2">2<div> 
 
<div id="test_3">3<div> 
 
<div id="test_4">4<div> 
 
<div id="test_5">5<div> 
 
<div id="test_6">6<div>