CODEWITHSUNDEEP
javascripthtmljquery
SP1
SP1

Reputation: 1202

Attribute based filtering using jQuery

I am trying to filter using a date range based on data attributes and it's not working. I can get the text based filtering to work but not the date range.

HTML Code:

<div class="notificationCard" data-details="Change"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="6/21/2020" style="display: block;">
    Some stuff
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="7/21/2020" style="display: block;">
    Some stuff
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="9/10/2020" style="display: block;">
    Some stuff
</div>

And JavaScript code is

var $notificationCards = $('.notificationCard');
$notificationCards.filter("[data-filter-statusdate='5/20/2020'],[data-filter-statusdate='7/22/2020']").show();

I was hoping to have only first two div's show up but none of them is showing up. Can someone please tell me what I am doing wrong here.

Here's a Fiddle

Upvotes: 0

Views: 35

Answers (1)

Unmitigated
Unmitigated

Reputation: 89214

You cannot use attribute selectors in this way, as they can only match specific values. You can instead create Dates from the start and end strings and loop over all of the divs, hiding it if the date is less than the start of greater than the end, i.e. not in the range.

function filter()
{
 var $notificationCards = $('.notificationCard');
 let start = new Date('5/20/2020'), end = new Date('7/22/2020');
 $notificationCards.each(function(){
  let date = new Date($(this).data('filter-statusdate'));
  if(date < start || date > end){
    $(this).hide();
  }
 });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="notificationCard" data-details="Change"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="6/21/2020" style="display: block;">
    Some stuff (6/21/2020)
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="7/21/2020" style="display: block;">
    Some stuff (7/21/2020)
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="9/10/2020" style="display: block;">
    Some stuff (9/10/2020)
</div>

<button onclick=filter()>Filter between 5/20/2020 and 7/22/2020</button>

Upvotes: 2

Related Questions