Фильтрация на основе атрибутов с использованием jQuery

Question

Я пытаюсь выполнить фильтрацию с использованием диапазона дат на основе атрибутов данных, но это не работает. Я могу заставить работать текстовую фильтрацию, но не диапазон дат.

HTML Код:

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

И JavaScript код

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

Я надеялся, что появятся только первые два div, но ни один из них не появится. Подскажите, пожалуйста, что я здесь делаю не так.

Вот Fiddle

Answer 1

Вы не можете использовать селекторы атрибутов таким образом, поскольку они могут соответствовать только указанным c значениям. Вместо этого вы можете создать Date s из начальной и конечной строк и l oop поверх всех div s, скрывая его, если дата меньше начала или больше конца, то есть вне диапазона.

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>