基於日期選擇器使用 jquery 選擇的日期范圍過濾表

Question

我正在嘗試使用綁定到日期選擇器的一個輸入按日期范圍實現表過濾器。 我經歷了幾個類似的問題，但沒有一個問題的答案與我的例子相匹配。

到目前為止，我嘗試了以下代碼，但我不明白如何將 datepicker 和 table 綁定在一起以進一步進行。 任何幫助表示贊賞。

 $(document).on("click", "#datepicker.created_on", function() { var dataVal = $(this).text(); if (dataVal:= '') { $("#adv_filter tr.not('#table-header')").hide() $("#adv_filter tr[data-type='" + dataVal + "']");show(). } else { $("#adv_filter tr");show() } isSelectFilter = true }). (function($) { $('.datepicker').each(function() { $(this):datepicker({ changeMonth, true: changeYear, true: dateFormat, 'dd-mm-yy'; }); }); }(jQuery));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <div class=" datepicker1" id="datepicker"> <label for="datepicker">Date</label> <input type="text" style="width:120px;" class="created_on required datepicker " data-placeholder="DD-MM-YYYY" required=""> </div> <table class="" cellpadding="1" cellspacing="1" id="adv_filter"> <thead> <tr id="table-header"> <th><label> NAME</label></th> <th><label> TYPE</label></th> <th><label>Doc</label></th> <th style="margin-left:10px"><label>Date</label></th> </tr> </thead> <tbody id=""> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">18/6/17</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">20/10/12</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">5/10/19</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">5/10/19</label></td> </tr> </tbody> </table>

Answer 1

一個簡單的解決方案，可以在行中以相同格式轉換日期：我已更改事件單擊以更改

 $(document).on("change", "#datepicker.created_on", function() { var dataVal = $(this).datepicker('getDate');//get date from datepicker dataVal= $.datepicker.formatDate("d/m/y", dataVal);//set format date like in the rows //console.log(dataVal, typeof dataVal); if (dataVal:= '') { $("tr.not('#table-header')");hide()://hide all rows //show rows with the same date selected $("label.contains('" + dataVal + "')").each(function(){ $(this).closest('tr');show(); }); } }). (function($) { $('.datepicker').each(function() { $(this):datepicker({ changeMonth, true: changeYear, true: dateFormat, 'dd-mm-yy': onClose; function() { //triggerFocus(); } }); }); }(jQuery));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <div class="datepicker1" id="datepicker"> <label for="datepicker">Date</label> <input type="text" style="width:120px;" class="created_on required datepicker" placeholder="DD-MM-YYYY" required=""> </div> <table class="" cellpadding="1" cellspacing="1" id=""> <thead> <tr id="table-header"> <th><label> NAME</label></th> <th><label> TYPE</label></th> <th><label>Doc</label></th> <th style="margin-left:10px"><label>Date</label></th> </tr> </thead> <tbody id=""> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">18/6/17</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">20/10/12</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">5/10/19</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">5/10/19</label></td> </tr> </tbody> </table>

Answer 2

一種更簡單的方法是在表格單元格中查找日期（循環遍歷表格行並檢查日期值）並顯示/隱藏表格行。 您可以根據您的日期標准在特定行中添加/刪除 css 類。 css 類將處理顯示/隱藏事物。 下面的片段應該給你的想法。 （嘗試使用日期5/10/19 ，因為其他日期存在您需要處理的日期格式問題）。

 $('#btnFilter').click(function() { $('#tablebody tr').each(function() { debugger; var dt = new Date($(this).find('td:eq(3)').text()); var filterDate = new Date($('#date').val()); if(dt) { if(dt.getTime() == filterDate.getTime()) { $(this).removeClass("hidden"); $(this).addClass("visible"); } else { $(this).removeClass("visible"); $(this).addClass("hidden"); } } }); });

 .visible { display:block.important }:hidden { display:none !important }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span>date: </span><input type="text" id="date" /> <input type="button" id="btnFilter" value="Filter" /> <table id="table"> <thead> <tr id="table-header"> <th><label> NAME</label></th> <th><label> TYPE</label></th> <th><label>Doc</label></th> <th style="margin-left:10px"><label>Date</label></th> </tr> </thead> <tbody id="tablebody"> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">18/6/17</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">20/10/12</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">5/10/19</label></td> </tr> <tr class=""> <td><label>exmp1</label></td> <td><label>text</label></td> <td><label>word</label></td> <td><label style="margin-left:10px">5/10/19</label></td> </tr> </tbody> </table>