How to Display Table Data Between Two Selected Dates Using JavaScript
In this Javascript tutorial, we will see how to use JavaScript to filter html table rows based on the selected date range.
This code allows users to input a start and end date and then filters the table rows to display only the rows with birthdays falling within that date range. It provides a simple date-based search functionality for the table data.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Search Between 2 Dates</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body{background-color: #f2f2f2;}
table{
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 20px auto;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
table th{
background-color: #f2f2f2;
font-weight: bold;
text-align: left;
padding: 10px;
border: 1px solid #ddd;
}
table tr{ border: 1px solid #ddd; }
table td{ padding: 10px; border: 1px solid #ddd; }
#search-box{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#start-date, #end-date{
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-left: 5px;
margin-right: 10px;
}
#search-button{
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>City</th>
<th>Birthday</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Male</td>
<td>New York</td>
<td>01/01/2021</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Female</td>
<td>Los Angeles</td>
<td>02/01/2022</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>35</td>
<td>Male</td>
<td>Chicago</td>
<td>03/01/2020</td>
</tr>
</table>
<br>
<div id="search-box">
Start Date: <input type="date" id="start-date">
End Date: <input type="date" id="end-date">
<button id="search-button">Search</button>
</div>
<script>
const startDateInput = document.getElementById("start-date");
const endDateInput = document.getElementById("end-date");
const searchButton = document.getElementById("search-button");
searchButton.addEventListener("click", filterByDateRange);
function filterByDateRange(){
// get the start and end date values
const startDate = new Date(startDateInput.value);
startDate.setHours(0,0,0,0); // Set time to midnight
const endDate = new Date(endDateInput.value);
endDate.setHours(0,0,0,0); // Set time to midnight
// get all the rows in the table
const rows = document.querySelectorAll("table tr:not(:first-child)");
rows.forEach(row=>{
// get the birthday cell in the current row
const birthDayCell = row.querySelector("td:last-child");
// get the birthday value
const birthday = new Date(birthDayCell.textContent);
//Also, you should check that the selected element is not null
//before trying to access its textContent property
if(birthDayCell !== null){
const birthday = new Date(birthDayCell.textContent);
birthday.setHours(0,0,0,0); // Set time to midnight
}
// check if the birthday is within the date range
if(birthday >= startDate && birthday <= endDate)
{
row.style.display = "";
}
else{
row.style.display = "none";
}
});
}
</script>
</body>
</html>
Code Explanation:
this JavaScript code, allows users to dynamically filter a table based on their dates selections.
This JavaScript code performs the following actions:
1 - Captures references to HTML elements: startDateInput, endDateInput, and searchButton..
2 - Adds a "click" event listener to the "Search" button.
3 - Iterates through each row, obtaining the birthday date from the last cell.
4 - Compares the birthday date to the specified date range.
5 - Displays the row if the birthday date falls within the range.
6 - Hides the row if the birthday date is outside the range.
OUTPUT:
