Attribute based filtering using jQuery

Question

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

your dates in filtering and the HTML do not match up. Can you clarify your expected output ? — Always Helping
– Always Helping, Commented Aug 7, 2020 at 13:30
You can not use filter (with strings) to filter on the given range. You would have to use a filter function and parse the value of the filter-statusdate to a date and then do some comparison. See "Using a Filter Function" on the jQuery documentation page: api.jquery.com/filter/#filter-selector — svenbravo7
– svenbravo7, Commented Aug 7, 2020 at 13:33

Unmitigated · Accepted Answer · 2020-08-07 13:45:03Z

2

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>

answered Aug 7, 2020 at 13:45

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SP1 Over a year ago

Thank you so much for your help :)

Unmitigated Over a year ago

@SP1 No problem.

Collectives™ on Stack Overflow

Attribute based filtering using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related