How Do It Table Filter By Date Using Jquery

How to filter tables data using date range using only jquery plugins.I have one dropdown box data depends on selected date and date range and values.Howcoz i want to add plugins in

Solution 1:

Here is how you could do it. Note also some minor modifications to the 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>

Solution 2:

I have created the function for table filter

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");
        }
    });
}

sample function call

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

Format : display(startDate,endDate);

For 30 days display(currentDate-30,currentDate);

Note Pls change the html date format

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