Question

我有一个阵列，2个日期选择器和一个按钮。选择FROM日期和TO日期并单击按钮后，我想在两个选择日期之间过滤此数组，但不知何故它没有成功。请帮忙。 LIVE CODE

HTML

<p>From: <input class="datepicker" id="dateFrom" type="text"> To: <input class="datepicker" id="dateTo" type="text"><button  class="buttApply">APPLY</button></p>

    <div class="text"></div>
    <table id="myTable" border="1" width="150" cellpadding="5">
        <tr><td>DATE LIST</td></tr>
    </table>

JS

$( ".datepicker" ).datepicker();

 var dateFrm = $('#dateFrom').val();
 var datTo = $('#dateTo').val();

        $('.buttApply').click(
            function()
            {
                dateList.sort(function(dateFrm, datTo)
                              {
                                  return dateFrm > datTo;
                              }
                );


            }
        );

var dateList =[
            "07/01/2014",
            "07/02/2014",
            "07/03/2014",
            "07/04/2014",
            "07/05/2014",
            "07/06/2014",
            "07/07/2014",
            "07/08/2014",
            "07/09/2014",
            "07/10/2014",
    ];

    for (var i=0; i< dateList.length; i++)
        {
            var tr="<tr>";
            var td = "<td>" + dateList[i] + "</td></tr>";
            $('#myTable').append(tr+td);
        }

Answer 1

我想您可能想要使用filter功能。

filter（）方法创建一个包含所有传递元素的新数组由提供的函数实现的测试。

此外，以下是对您的代码的一些修改：

$(".datepicker").datepicker();

$('.buttApply').click(
    function () {
        // Retrieve your dateForm and dateTo value here, otherwise your dateFrm and datTo will be equal to ''.
        // Also, use filter instead of sort. The filtered variable is your new array.
        var filtered = dateList.filter(function (item) {
            return item >= $('#dateFrom').val() && item <= $(
                '#dateTo').val();
        });

        // Refresh your table
        refreshTable(filtered);
    }
);

var dateList = [
    "07/01/2014",
    "07/02/2014",
    "07/03/2014",
    "07/04/2014",
    "07/05/2014",
    "07/06/2014",
    "07/07/2014",
    "07/08/2014",
    "07/09/2014",
    "07/10/2014",
];

function refreshTable(list) {
    $("#myTable").html("");
    for (var i = 0; i < list.length; i++) {
        var tr = "<tr>";
        var td = "<td>" + list[i] + "</td></tr>";
        $('#myTable').append(tr + td);
    }
}

refreshTable(dateList);

Working demo

希望这有帮助！

Answer 2

var dateList = [
      "07/01/2014"
    , "07/02/2014"
    , "07/03/2014"
    , "07/04/2014"
    , "07/05/2014"
    , "07/06/2014"
    , "07/07/2014"
    , "07/08/2014"
    , "07/09/2014"
    , "07/10/2014"
];

function renderTable( dateList )
{
    $('#myTable').html('');

    for (var i=0; i< dateList.length; i++)
    {
        var tr="<tr>";
        var td = "<td>" + dateList[i] + "</td></tr>";
        $('#myTable').append(tr+td);
    }
}

// If you need to change dateList element format,
// just only change this convert function.
function DateToUnixtime( date_string )
{
    return new Date(date_string).getTime() / 1000;
}

$('.buttApply').click(function()
{
    var unixtime_from = $('#dateFrom').datepicker('getDate').getTime() / 1000;
    var unixtime_to = $('#dateTo').datepicker('getDate').getTime() / 1000;

    var dateListFiltered = dateList.filter(function(date)
    {
        var unixtime = DateToUnixtime( date );
        return unixtime >= unixtime_from && unixtime <= unixtime_to;
    });

    renderTable( dateListFiltered );
});

$( ".datepicker" ).datepicker();

renderTable( dateList );

即使您将来需要更改dateList元素格式，此变体仍然有效。

演示：http://jsfiddle.net/89wbv/2/

Answer 3

使用moment.js

示例：

    var startDate = new Date(2013, 1, 12)
  , endDate   = new Date(2013, 1, 15)
  , date  = new Date(2013, 2, 15)
  , range = moment().range(startDate, endDate);

range.contains(date); // false

数组 - 在两个日期之间过滤

3 个答案: