Following HTML table has Start Date and End Date in different columns and if we need to filter the rows between these dates with the help of a date picker.
<table class="table table-striped mt32 customers-list" id="tableData"> <thead> <tr> <th width=40%> Name</th> <th>Internal Name</th> <th>Offer Code</th> <th width=30%>Start Date</th> <th width=30%>End Date</th> </tr> </thead> <tbody> <tr id="maintr"> <td> Amazon Spring ADP 2020 -$5 Amazon GC </td> <td> PRDOFR168_livePERD </td> <td> SPRINGADPAMZ5GC2020 </td> <td> 22-JAN-20 </td> <td> 30-APR-20 </td> </tr> <tr id="maintr"> <td> Indy Car Giveaway 2020 </td> <td> PRDOFR170 </td> <td> INDYCARSWEEP2020 </td> <td> 22-JAN-20 </td> <td> 15-APR-20 </td> </tr> <tr id="maintr"> <td> Indy Car Giveaway 2020 </td> <td> PRDOFR170_livePERD </td> <td> INDYCARSWEEP2020 </td> <td> 22-JAN-20 </td> <td> 15-APR-20 </td> </tr> <tr id="maintr"> <td> Test Offer 2 </td> <td> DEVOFR190 </td> <td> </td> <td> 29-JAN-20 </td> <td> </td> </tr> <tr id="maintr"> <td> Test Offer 3 </td> <td> DEVOFR193 </td> <td> </td> <td> 29-JAN-20 </td> <td> </td> </tr> </tbody> </table>
Script to filter date on 3 and 4 column
<script> const searchbyDate = () => { var startDateArr = []; var endDateArr = []; var myTab = document.getElementById('tableData'); let InputStartDate = document.getElementById('date_input').value; let InputEndDate = document.getElementById('date_input2').value; // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER. for(i = 1; i < myTab.rows.length; i++) { // GET THE CELLS COLLECTION OF THE CURRENT ROW. var objCells = myTab.rows.item(i).cells; var t1 = new Date(objCells.item(3).innerHTML) startDateArr.push(t1); var t2 = new Date(objCells.item(4).innerHTML) endDateArr.push(t2); } var startDate = new Date(InputStartDate); var endDate = new Date(InputEndDate); startDate.setHours(0, 0, 0, 0); endDate.setHours(0, 0, 0, 0); let myTable = document.getElementById('tableData'); let tr = myTable.getElementsByTagName('tr'); if(+startDate > +endDate) { alert("Select Valid Date. Now please Refresh this page to continue to run code."); } else { for(var j = 0; j < endDateArr.length; j++) { var temp1 = new Date(startDateArr[j]); var temp2 = new Date(endDateArr[j]); if(startDate && !InputEndDate) { if(+startDate <= +temp1 || +startDate === +temp1) { tr[j + 1].style.display = ""; } else { tr[j + 1].style.display = "none"; } } else if(!InputStartDate && endDate) { if(+endDate >= +temp2 || +endDate === +temp2) { tr[j + 1].style.display = ""; } else { tr[j + 1].style.display = "none"; } } else if(startDate && endDate) { if((+startDate <= +temp1 || +startDate === +temp1) && (+endDate >= +temp2 || +endDate === +temp2)) { tr[j + 1].style.display = ""; } else { tr[j + 1].style.display = "none"; } } } } }
Top comments (0)