Py学习  »  Jquery

使用Javascript/jQuery中的datetimepicker在HTML表中筛选从日期到日期

danny_boy • 4 年前 • 567 次点击  

我有一个包含日期日志(包括时间)的表。我想使用datetimepicker,这样我就可以筛选“开始日期”和“结束日期”,它应该返回一个筛选过的表,其中包含所选日期之间的所有日期-时间日志。我该怎么做?

如果我选择:

FROM: 2020/01/04 15:40
TO: 2020/01/05 18:40

它应该在选定日期之间给我HTML表中的筛选记录。

这就是我到目前为止所做的:

interface.html格式:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    $(function(){  
        $("#from_date").datetimepicker();  
        $("#to_date").datetimepicker();  
    });  
    $('#search').click(function(){  
        var from_date = $('#from_date').val();  
        var to_date = $('#to_date').val();  
        if(from_date != '' && to_date != '')  
        {    
            var filter, table, tr, td, i;
            filter = date.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            }  
            else  
            {  
                alert("Please Select Date");  
            }  
       });  
    }


<input name="from_date" id="from_date" type="text" placeholder="From date..."> 
<input name="to_date" id="to_date" type="text" placeholder="To date...">
<button name="search" id="search" value="search"> Search </button>

<table id="myTable">
    <thead>
        <tr>
            <th> From date </th>
            <th> To date </th> 
            <th> Daily Time </th>
        </tr>
    </thead>
    <tbody id='time_details'>
        <tr>
            <td> 04-01-2020 12:14:15 PM </td>
            <td> 05-01-2020 12:14:15 PM </td>
        </tr>
        <tr>
            <td> 07-01-2020 09:30:00 AM </td>
            <td> 09-01-2020 11:00:00 PM </td>
        </tr>
        <tr>
            <td> 20-01-2020 08:00:00 PM </td>
            <td> 21-01-2020 11:00:00 PM </td>
        </tr>      
    </tbody>

</table>

如何使用datetimepicker筛选表中的行?有谁能帮我处理上面的Javascript代码吗?

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/56021
 
567 次点击