I want to filter the date having January 11, 2021 format and want to filter by two column Date and Month. Appreciate your help in advance.
Please find the sample coding i am trying to sort.
Thank you in Advance.
The Value input via (Advance custom field pro repeater field) acf pro date picker wordpress.
<div class="container">
<div class="row">
<div class="col-4">
<select id="regionDropdown">
<option value="All">Select Year</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
</div>
<div class="col-4">
<select id="roleDropdown">
<option value="All">Select Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September </option>
<option value="">October</option>
<option value="">December</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th> Arrival Date </th>
<th> Departure Date </th>
<th> Price </th>
<th> Status </th>
<th> No of Pax </th>
<th> Discount </th>
</tr>
</thead>
<tbody id="download-forms-table-tbody">
<tr>
<td> January 11, 2022 </td>
<td> January 17, 2022 </td>
<td> USD $450 </td>
<td> Available </td>
<td> 10 </td>
<td> 10 % </td>
<td>
<div class="btn btn-primary">Book Now</div>
</td>
</tr>
<tr>
<td> February 13, 2021 </td>
<td> February 17, 2021 </td>
<td> USD $450 </td>
<td> Available </td>
<td> 10 </td>
<td> 10 % </td>
<td>
<div class="btn btn-primary">Book Now</div>
</td>
</tr>
<tr>
<td> March 21, 2023 </td>
<td> march 28, 2023 </td>
<td> USD $450 </td>
<td> Available </td>
<td> 10 </td>
<td> 10 % </td>
<td>
<div class="btn btn-primary">Book Now</div>
</td>
</tr>
<tr>
<td> December 11, 2022 </td>
<td> December 17, 2022 </td>
<td> USD $450 </td>
<td> Available </td>
<td> 10 </td>
<td> 10 % </td>
<td>
<div class="btn btn-primary">Book Now</div>
</td>
</tr>
<tr>
<td> June 11, 2022 </td>
<td> July 17, 2022 </td>
<td> USD $450 </td>
<td> Available </td>
<td> 10 </td>
<td> 10 % </td>
<td>
<div class="btn btn-primary">Book Now</div>
</td>
</tr>
<tr>
<td> August 11, 2022 </td>
<td> August 17, 2022 </td>
<td> USD $450 </td>
<td> Available </td>
<td> 10 </td>
<td> 10 % </td>
<td>
<div class="btn btn-primary">Book Now</div>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script>
$('.container').on("change", 'select', function() {
var region = $('.fixed-year').val().toLowerCase(),
role = $('.fixed-month').val().toLowerCase();
var table = $("#download-forms-table-tbody");
var trs = table.find('tr');
trs.hide();
var filtered = trs.filter(function(index, elem) {
var tds = $(elem).find('td');
if (region !== "all" && tds.eq(1).text().trim().toLowerCase() !== region) {
return false;
}
if (role !== "all" && tds.eq(2).text().trim().toLowerCase() !== role) {
return false;
}
return true;
})
filtered.show();
if (filtered.length == 0) {
alert("No Records Found!!!");
}
});
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("fixed-depart");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
