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 = newDate().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 () {
        returnnewDate((this.is(':input') ? this.val() : this.text()).replace(/\/(..)$/, '/20$1'));
    }
    
    functionapplyFilter() {
        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 = newDate('1000-01-01');
            end = newDate('3000-01-01');
        } elseif (!parseInt(filterType)) {
            // Use data entry:
            start = $("#selectDate").date();
            end = filterType === "Custom Date Range" ? $("#selectDate2").date() : start;
        } else {
            // Show last X days:
            start = newDate();
            start.setHours(0,0,0,0);
            start.setDate(start.getDate() - parseInt(filterType));
            end = newDate(); // 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
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><linkrel="stylesheet"type="text/css"href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><selectclass="inputxlg"id="rangeval"><optionvalue="">Filter by Date Range</option><optionvalue="15">15 Days</option><optionvalue="30">30 Days</option><optionvalue="90">90 Days</option><optionvalue="365">Last Year</option><optionvalue="Single Date">Single Date</option><optionvalue="Custom Date Range">Custom Date Range</option></select><inputid="selectDate"name="selectDate"type="text"><inputid="selectDate2"name="selectDate"type="text"><table><caption>
        Table
    </caption><thead><tr><th>No</th><th>Status</th><th>Date</th></tr></thead><tbodyclass="mainBody"><trscope="row"><td>11</td><td>In-Progress</td><td>11/05/17</td></tr><trscope="row"><td>12</td><td>In-Progress</td><td>02/01/18</td></tr><trscope="row"><td>1</td><td>In-Progress</td><td>11/01/17</td></tr><trscope="row"><td>13</td><td>In-Progress</td><td>11/08/17</td></tr><trscope="row"><td>14</td><td>In-Progress</td><td>11/06/17</td></tr><trscope="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

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

    var startDateTimeStamp = newDate(startDateArray[2],+startDateArray[0],startDateArray[1]).getTime();
    var endDateTimeStamp = newDate(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 =  newDate(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

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