社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

danny_boy • 5 年前 • 828 次点击  

我有一个包含日期日志(包括时间)的表。我想使用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
 
828 次点击