日期之间的 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">

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

有人给我提示吗？

Answer 1

使用过滤函数。

$('#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");
        }
    });
});