Javascript 显示/隐藏特定日期范围内元素的最佳方法

用例：

我有一个大约1000个项目的列表，希望有一个“日期范围过滤器”来显示/隐藏在给定的两个日期之间的元素

你会怎么做

我正在考虑对每个元素应用一个带有“date”或“timestamp”的选择器，并在更改Datepicker范围时循环所有元素

这对你有意义吗？也许有人有这样的例子？

---

我的大脑目前处于冻结状态，我需要一些灵感

我个人会使用

VueJs

（或者像

AngularJs

等其他框架）。使用

v-if

指令，它应该是一个非常简单的实现

因为代码片段中不支持

vueJs

，所以我在这里编写了一个工作示例<代码>2017-03-03和&2018-03-3只是出于演示目的的随机日期。您可以使用

vueJs

创建一个循环，并在10行代码中处理所有1000个元素

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

#html
你看见我了吗
看不见我
#vueJs
var app=新的Vue({
el:“#应用程序”，
数据：{
日期：2017-01-01，
日期：2017-01-01
}
})

当然，您需要使用一些计算属性来更改实现，但这已经足够打开这条路了

您可以在此处找到有关条件渲染的信息

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

我希望它对你有帮助，对你有意义

最好使用“过滤器”功能

您可以定义自己的返回值，以避免使用循环

$（函数（）{
$（“div[id]”）。过滤器（函数（）{
var代码=+$（this.prop（“id”）.split（“”）[1]；
var标志=假；
如果（代码>4）{
flag=true；
}
返回标志；
}).hide（）；
});

1.
2.
3.
4.
5.
6
这是我最后使用的代码：

HTML:

您使用的是javascript框架还是native+jquery？project使用的jqueryI就是这种方法。我将使用id=“T_1193050938”（而不是使用=“D2007-10-27”）并在更改日期范围选择器时运行过滤器。因此，当选择日期范围时，将日期修改为时间戳，并根据当前时间戳过滤每个元素。
<li id="xxx" rel="<?=strtotime($row['date'])?>">
    some content
</li>

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