javascript - 如何过滤 HTML 表格中的“开始”和“结束”日期？

Question

我有一个由两列组成的 HTML 表:开始时间和停止时间。 我想使用日期时间选择器 使用“开始”和“结束”日期来过滤具有特定日期和时间的行。我怎样才能做到这一点？

这就是我的表格的样子:

Start_time                 Stop_time                    
Dec. 31, 2019, 5:39 a.m    Dec. 31, 2019, 5:50 a.m      
Jan. 01, 2020, 9:00 a.m    Jan. 01, 2020, 18:00 a.m      
Jan. 02, 2020, 6:00 a.m    Jan. 02, 2020, 19:00 a.m      
...                        ... 

interface.html:

    $(function () {
            $(".datetimepicker").datetimepicker();
        });
        function myFunction() {
        // var from = $('#start_date').val();
        // var to = $('#end_date').val();
        var input1,input2, filter, table, tr, td, i;
        input1 = document.getElementById("start_date").value;
        input2 = document.getElementById("end_date").value;
        table = document.getElementById("t01");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[4].innerHTML;
            var d1=input1.split("-");
            var d2=input2.split("-");
            var c=td.split("-");
            var from=new Date(d1[0],parseInt(d1[1])-1,d1[2]);
            var to   = new Date(d2[0], parseInt(d2[1])-1, d2[2]);
            var check = new Date(c[0], parseInt(c[1])-1, c[2]);
            if(check>=from && check<=to) {
                tr[i].style.display = "";
            }
            else {
                tr[i].style.display = "none";
            }
            }
        }

<!-- jQuery -->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- XDSoft DateTimePicker -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>

    <input class="datetimepicker"  name="start_date" id="start_date" type="text" placeholder="From date..."> 
    <input class="datetimepicker" name="end_date" id="end_date" type="text" placeholder="To date...">
    <button class="btn btn-info btn-block" onclick="myFunction()"> Search </button>

    <table id="t01">
        <tr>
            <th> Start Time </th>
            <th> End Time </th> 
        </tr>
        <tr>
            <td> Jan. 2, 2020, 10:19 a.m </td>
            <td> Jan. 2, 2020, 10:20 a.m. </td>
        </tr>
        <tr>
            <td> Jan. 3, 2020, 10:22 a.m. </td>
            <td> Jan. 3, 2020, 10:47 a.m. </td>
        </tr>
    </table>

如何根据开始和停止日期(包括时间)过滤这些行？

Answer 1

由于您完成了大部分解析，因此您需要的只是监听插件的更改事件，onChangeDateTime 解释 here .

jQuery('#datetimepicker').datetimepicker({
  onChangeDateTime:myFunction
});