最好的方法来显示/隐藏要素在一定日期范围内

Question

USECASE：

我有大约1000项列表，并希望能有一个“日期范围过滤器”显示/隐藏元件，其之间的给出2个日期。

你会怎么做呢？

我在考虑对每个元素应用带有“date”或“timestamp”的选择器，并遍历DateCicker范围的所有元素onChange。

这对你有意义吗？也许任何人都有这样的例子吗？ 我的大脑处于冻结模式目前，我可以利用一些启发......

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> 

作品应该尽可能地工作。再次感谢！

Answer 2

我会亲自使用VueJs（或类似AngularJs等其他框架）。有了v-if指令，它应该是一个非常简单的实现。

因为代码段中不支持vueJs，所以我在这里写一个工作示例。 2017-03-03 & & 2018-03-3只是用于演示目的的随机日期。你真的可以做一个循环中使用vueJs和处理所有1000个元素在10行代码

# 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' 
    } 
}) 

当然，你需要改变使用一些计算性能的实现，但是这足以开辟道路。

您可以在此page

您可以找到有关列表信息呈现here

找到有关条件呈现信息，我希望它可以帮助和对你有意义！

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>