CODEWITHSUNDEEP
javascriptjquery
Christian K.
Christian K.

Reputation: 538

Best Approach to show/hide elements within a certain date range

Usecase:

I have a list of about 1000 Items and would like to have a "date range filter" to show/hide elements which are in between the 2 dates given.

How would you go about this?

I am thinking about applying a selector with the "date" or "timestamp" to each element and loop over all elements onChange of the Datepicker Range.

Does this make sense to you and maybe anyone has an example for this? My brain is in freeze mode currently and I could use some inspiration ...

Upvotes: 0

Views: 1043

Answers (3)

Chrysovalantis Koutsoumpos
Chrysovalantis Koutsoumpos

Reputation: 349

I would personally use VueJs (or another framework like AngularJs etc). With v-if directive it should be a very easy implementation.

Because there is no support for vueJs in the code snippet, I am writing here a working example. 2017-03-03 && 2018-03-3 are just random dates for demonstration purposes. You can really make a loop using vueJs and handle all 1000 elements in 10 lines of code

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

Of course you need to change the implementation using some computed properties, but this is enough to open the way.

You can find information about the conditional rendering at this page

You can find information about the list rendering here

I hope it helps and make sense to you!

Upvotes: 0

Christian K.
Christian K.

Reputation: 538

This is the code I ended up using:

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>

Works exaclty as it should . thanks again!

Upvotes: 1

BlackJohan
BlackJohan

Reputation: 76

Is better to use the "filter" function.

You can define your own return values avoiding to use a loop.

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

Upvotes: 1

Related Questions