javascript - 如何使用 jquery 按日期过滤表

Question

如何仅使用 jquery 插件使用日期范围过滤表格数据。我有一个下拉框数据取决于所选日期和日期范围以及值。Howcoz 我想在我的网页中添加插件我们可以使用插件 b

HTML:

<input id="seate" name="" type="text">

<input id="seate2" name="" type="text">

<table>
    <caption>
        Table
    </caption>
    <thead>
        <tr>
            <th>No</th>
            <th>Status</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody class="rody">
        <tr scope="row">
            <td>11</td>
            <td>In-Progress</td>
            <td>11/05/17</td>
        </tr>
        <tr scope="row">
            <td>12</td>
            <td>In-Progress</td>
            <td>02/01/18</td>
        </tr>
        <tr scope="row">
            <td>1</td>
            <td>In-Progress</td>
            <td>11/01/17</td>
        </tr>
        <tr scope="row">
            <td>13</td>
            <td>In-Progress</td>
            <td>11/08/17</td>
        </tr>
        <tr scope="row">
            <td>14</td>
            <td>In-Progress</td>
            <td>11/06/17</td>
        </tr>
        <tr scope="row">
            <td>15</td>
            <td>In-Progress</td>
            <td>11/04/17</td>
        </tr>
    </tbody>
</table>

Answer 1

这里是你如何做到的。另请注意对 HTML 的一些小修改:

$(function(){
    // Initialise the inputs on page load:
    var today = new Date().toJSON().replace(/..(..)-(..)-(..).*/, '$2/$3/$1');
    $("#selectDate").datepicker({ dateFormat: 'mm/dd/yy' }).val(today).change(applyFilter);
    $("#selectDate2").datepicker({ dateFormat: 'mm/dd/yy' }).val(today).change(applyFilter);
    $("#rangeval").change(applyFilter);

    $.fn.date = function () {
        return new Date((this.is(':input') ? this.val() : this.text()).replace(/\/(..)$/, '/20$1'));
    }
    
    function applyFilter() {
        var filterType = $("#rangeval").val(),
            start, end;
        // Set the visibility of the two date fields:
        $("#selectDate").toggle(["Single Date", "Custom Date Range"].indexOf(filterType) > -1);
        $("#selectDate2").toggle(filterType === "Custom Date Range");
        // Depending on the type of filter, set the range of dates (start, end):
        if (filterType === "") {
            // Show all: choose extreme dates
            start = new Date('1000-01-01');
            end = new Date('3000-01-01');
        } else if (!parseInt(filterType)) {
            // Use data entry:
            start = $("#selectDate").date();
            end = filterType === "Custom Date Range" ? $("#selectDate2").date() : start;
        } else {
            // Show last X days:
            start = new Date();
            start.setHours(0,0,0,0);
            start.setDate(start.getDate() - parseInt(filterType));
            end = new Date(); // today
        }
        // For each row: set the visibility depending on the date range
        $(".mainBody tr").each(function () {
            var date = $("td:last-child", this).date();
            $(this).toggle(date >= start && date <= end);
        });
    }
    applyFilter(); // Execute also on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<select class="inputxlg" id="rangeval">
    <option value="">Filter by Date Range</option>
    <option value="15">15 Days</option>
    <option value="30">30 Days</option>
    <option value="90">90 Days</option>
    <option value="365">Last Year</option>
    <option value="Single Date">Single Date</option>
    <option value="Custom Date Range">Custom Date Range</option>
</select>

<input id="selectDate" name="selectDate" type="text">
<input id="selectDate2" name="selectDate" type="text">

<table>
    <caption>
        Table
    </caption>
    <thead>
        <tr>
            <th>No</th>
            <th>Status</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody class="mainBody">
        <tr scope="row">
            <td>11</td>
            <td>In-Progress</td>
            <td>11/05/17</td>
        </tr>
        <tr scope="row">
            <td>12</td>
            <td>In-Progress</td>
            <td>02/01/18</td>
        </tr>
        <tr scope="row">
            <td>1</td>
            <td>In-Progress</td>
            <td>11/01/17</td>
        </tr>
        <tr scope="row">
            <td>13</td>
            <td>In-Progress</td>
            <td>11/08/17</td>
        </tr>
        <tr scope="row">
            <td>14</td>
            <td>In-Progress</td>
            <td>11/06/17</td>
        </tr>
        <tr scope="row">
            <td>15</td>
            <td>In-Progress</td>
            <td>11/04/17</td>
        </tr>
    </tbody>
</table>