jQuery Isotope filtering between dates

Question

I'm working on an event calendar and I would like to show all events between two datepicker fields and I would be grateful for every tip.

Isotope Code:

// filter the events by datepicker fields when search button is clicked
$('#calbtn').on( 'click', function( event ) {

    // get startdate from datepicker field
    var startdate = $('#calstartday').val();
    // get enddate from datepicker field
    var enddate = $('#calendday').val();

    $grid.isotope({
      filter: '[data-startdate="' + startdate + '"], [data-enddate="' + enddate + '"]'
    });
});

This is working so far, but only shows the events with the exact start- and enddate.

And this is how the events are looking like for demo purpose:

<div data-startdate="2022-01-01" data-enddate="2022-04-24" class="event__item">
<div data-startdate="2023-01-01" data-enddate="2022-04-24" class="event__item">
<div data-startdate="2024-01-01" data-enddate="2022-04-24" class="event__item">
<div data-startdate="2025-01-01" data-enddate="2022-04-24" class="event__item">

My thoughts are: I'm sure that I need a custom function to filter for, where I compare the two timestamps and check if the event is between the two chosen dates. But I didnt found an approach inside the documenation or elsewhere, how to return the valid events.

Does anybody has a hint for me?

Answer 1

Use a filter function.

$('#calbtn').on( 'click', function( event ) {
    var startdate = $('#calstartday').val(),
        enddate = $('#calendday').val();

    $grid.isotope({
        filter: function () {
            return startdate >= $(this).data("startdate") && enddate < $(this).data("enddate");
        }
    });
});