如何使用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

我已經創建了表過濾器的功能

function display(startDate,endDate) {
    //alert(startDate)
    startDateArray= startDate.split("/");
    endDateArray= endDate.split("/");

    var startDateTimeStamp = new Date(startDateArray[2],+startDateArray[0],startDateArray[1]).getTime();
    var endDateTimeStamp = new Date(endDateArray[2],+endDateArray[0],endDateArray[1]).getTime();

    $("table tbody.mainBody tr").each(function() {
        var rowDate = $(this).find('td:eq(2)').html();
        rowDateArray= rowDate.split("/");

var rowDateTimeStamp =  new Date(rowDateArray[2],+rowDateArray[0],rowDateArray[1]).getTime() ;
        // alert(startDateTimeStamp<=rowDateTimeStamp)
        // alert(rowDateTimeStamp<=endDateTimeStamp)
        if(startDateTimeStamp<=rowDateTimeStamp && rowDateTimeStamp<=endDateTimeStamp) {
            $(this).css("display","block");
        } else {
            $(this).css("display","none");
        }
    });
}

樣本函數調用

display("11/08/2017","02/01/2018")

格式： display(startDate,endDate);

連續30天顯示（currentDate-30，currentDate）;

注意請更改html日期格式

<tr scope="row">
    <td>11</td>
    <td>In-Progress</td>
    <td>11/05/2017</td> 
</tr>

Answer 2

這是您的方法。 還請注意對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>