Question

我有一个项目列表，其中包含订单号和订购日期等属性。我的目标是将所有用户的订单加载到这些项目div中并允许它们进行过滤。当用户在文本字段中键入订单号时，我已正确过滤。现在我试图允许他们选择Date From和Date To范围，并在必要时隐藏或显示div。

以下是div示例：

<div class="item" data-orderNo="457748322" data-dateOrdered="12/17/2014">
    ... Order Details ...
</div>

我可以使用以下代码按订单号过滤它们：

$('#orderNumberFilter').keyup(function () {
   var orderNo = $(this).val();
   if (orderNo == "") {
        $(".item").removeClass( "hiddenOrderNo" );
    } else {
        $(".item[data-orderNo*='"+orderNo+"']").removeClass( "hiddenOrderNo" );
        $(".item:not([data-orderNo*='"+orderNo+"'])").addClass( "hiddenOrderNo" );
    }
});

最后，我有两个datepicker字段：fromDateFilter（最早的日期）和toDateFilter（最新的日期）。我尝试了以下但是它没有工作：

$( "#fromDateFilter" ).datepicker({
  onClose: function ( selectedDate ) {
        if(selectedDate == "") {
            $(".item").removeClass( "hiddenDateFrom" );
        } else {
            var start = new Date(selectedDate);
            var end = new Date($(".item").attr("data-dateOrdered"))
            if (start < end) {
                $(".item:not([data-dateOrdered*='"+selectedDate+"'])").addClass( "hiddenDateFrom" );
            } else {
                $(".item[data-dateOrdered*='"+selectedDate+"']").removeClass( "hiddenDateFrom" );
            }
        }
      }
    });
  }
});

toDateFilter是一样的，我只是试图改变胡萝卜的方向。知道我做错了吗？

Answer 1

您可能需要一个像

这样的过滤方法

function filter() {
    var orderNo = $('#orderNumberFilter').val(),
        fd = $("#fromDateFilter").datepicker('getDate'),
        td = $("#toDateFilter").datepicker('getDate'),
        $items = $(".item"),
        $filtered = $items;
    if (orderNo != "") {
        $filtered = $filtered.filter("[data-orderNo*='" + orderNo + "']");
    }else if(!fd && !td){
        $items.removeClass('hiddenOrderNo');
    }

    $filtered = $filtered.filter(function () {
        var date = $.datepicker.parseDate('mm/dd/yy', $(this).attr('data-dateOrdered'));
        return (fd == null || date >= fd) && (td == null || date <= td);
    });
    $filtered.removeClass('hiddenOrderNo');
    $items.not($filtered).addClass('hiddenOrderNo');
}

在更改文本字段和日期字段时调用

$('#orderNumberFilter').on('keyup', filter);
$('#fromDateFilter, #toDateFilter').datepicker({
    onClose: filter
});

//to display some content, for demo only
$('.item').html(function() {
  return $(this).attr('data-orderNo') + '-' + $(this).attr('data-dateOrdered')
})

function filter() {
  var orderNo = $('#orderNumberFilter').val(),
    fd = $("#fromDateFilter").datepicker('getDate'),
    td = $("#toDateFilter").datepicker('getDate'),
    $items = $(".item"),
    $filtered = $items;
  if (orderNo != "") {
    $filtered = $filtered.filter("[data-orderNo*='" + orderNo + "']");
  } else if (!fd && !td) {
    $items.removeClass('hiddenOrderNo');
  }

  $filtered = $filtered.filter(function() {
    var date = $.datepicker.parseDate('mm/dd/yy', $(this).attr('data-dateOrdered'));
    return (fd == null || date >= fd) && (td == null || date <= td);
  });
  $filtered.removeClass('hiddenOrderNo');
  $items.not($filtered).addClass('hiddenOrderNo');
}

$('#orderNumberFilter').on('keyup', filter);
$('#fromDateFilter, #toDateFilter').datepicker({
  onClose: filter
});

.hiddenOrderNo {
  background-color: lightgrey;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="orderNumberFilter" />
<input id="fromDateFilter" />
<input id="toDateFilter" />
<div>
  <div class="item" data-orderno="457748322" data-dateordered="12/17/2014">457748322-12/17/2014</div>
  <div class="item" data-orderno="854455225" data-dateordered="12/18/2014">854455225-12/18/2014</div>
  <div class="item" data-orderno="7155222" data-dateordered="12/19/2014">7155222-12/19/2014</div>
  <div class="item" data-orderno="984445622" data-dateordered="12/17/2014">984445622-12/17/2014</div>
  <div class="item" data-orderno="123584397" data-dateordered="01/15/2015">123584397-01/15/2015</div>
</div>

jQuery包含/不包含日期范围

1 个答案: