jQuery 日期之间的同位素过滤

Question

我正在制作一个事件日历，我想显示两个日期选择器字段之间的所有事件，我将不胜感激每一个提示。

同位素代码：

// 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 + '"]'
    });
});

到目前为止这一切正常，但只显示具有确切开始和结束日期的事件。

为了演示目的，事件看起来是这样的：

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

我的想法是：我确信我需要一个自定义函数来过滤，我在其中比较两个时间戳并检查事件是否在两个选定日期之间。但是我没有在文档或其他地方找到一种方法，如何 return 有效事件。

有人给我提示吗？

Answer 1

使用 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");
        }
    });
});

jQuery 日期之间的同位素过滤

jQuery Isotope filtering between dates

jquery-isotope