如何在网页中实现忽略时分的日期范围表格筛选功能？

问题背景 #

现有日期选择器与表格结构如下，需实现点击筛选按钮后，根据选择的起止日期范围过滤表格行，仅匹配DD/MM/YYYY部分，忽略时分信息。

日期选择器HTML #

<div style="margin-bottom: 20px;">
    <label for="startDate">Start Date: </label>
    <input type="date" id="startDate" class="date-picker" />
    <label for="endDate">End Date: </label>
    <input type="date" id="endDate" class="date-picker" />
    <button onclick="filterByDate()">Filter</button>
</div>

表格结构（重点关注Checked Date列） #

<thead class="thead-dark sticky-top" style="top: 50px;">
    <tr>
        <th>Job No</th>
        <th>Company</th>
        <th>Permit No</th>
        <th>R No</th>
        <th>TM Company</th>
        <th>TM Type</th>
        <th>Address</th>
        <th>Checked By</th>
        <th>Checked Date</th>
        <th style="width:250px;">Comments</th>
    </tr>
</thead>

渲染后的表格数据行示例 #

<tr class="data-row">
   <td><a href="/Job?JobNo=505248" target="_blank">505248</a></td>
   <td>SCS</td>
   <td>SMA TEST</td>
   <td>SMATEST1</td>
   <td>>></td>
   <td></td>
   <td>DO NOT PLAN, THIS IS A TEST, TEST TOWN</td>
   <td>Test Name</td>
   <td>27/10/2023 12:17</td>
   <td>                                       
   <form id="CommentsBox_505248" style="display: flex; align-items: center; justify-content: flex-end; width: 100%;">
       <input type="hidden" name="JobNo" value="505248">
       <textarea name="Comments" placeholder="Add comments" style="flex: 1 1 auto; width: 100%; height: 80px; box-sizing: border-box; margin-right: 10px;"></textarea>
       <button type="button" onclick="submitComment('505248')">Submit</button>
   </form>               
   </td>            
 </tr>

实现方案 #

核心逻辑 #

1. 获取日期选择器的起止日期，转换为标准日期对象（input type="date"返回YYYY-MM-DD格式）
2. 遍历表格数据行，提取Checked Date列的日期部分，转换为可比较的日期对象
3. 判断行日期是否在选择范围内，控制行的显示/隐藏

方案1：原生JavaScript实现 #

添加以下filterByDate函数：

function filterByDate() {
    // 获取起止日期值
    const startDateStr = document.getElementById('startDate').value;
    const endDateStr = document.getElementById('endDate').value;
    
    // 未选择任何日期时显示所有行
    if (!startDateStr && !endDateStr) {
        document.querySelectorAll('.data-row').forEach(row => row.style.display = 'table-row');
        return;
    }

    // 转换为日期对象，结束日期加1天以包含当天所有时间
    const startDate = startDateStr ? new Date(startDateStr) : null;
    let endDate = endDateStr ? new Date(endDateStr) : null;
    if (endDate) endDate.setDate(endDate.getDate() + 1);

    // 遍历所有数据行
    document.querySelectorAll('.data-row').forEach(row => {
        // 提取Checked Date列的日期部分
        const dateText = row.querySelectorAll('td')[8].textContent.trim();
        const rowDateStr = dateText.split(' ')[0];
        const [day, month, year] = rowDateStr.split('/');
        const rowDate = new Date(`${year}-${month}-${day}`);

        // 判断是否在范围内
        let isInRange = true;
        if (startDate && rowDate < startDate) isInRange = false;
        if (endDate && rowDate >= endDate) isInRange = false;

        // 控制行显示状态
        row.style.display = isInRange ? 'table-row' : 'none';
    });
}

方案2：jQuery实现（更简洁） #

若使用jQuery，可替换为以下函数：

function filterByDate() {
    const startDateStr = $('#startDate').val();
    const endDateStr = $('#endDate').val();

    // 未选择日期时显示所有行
    if (!startDateStr && !endDateStr) {
        $('.data-row').show();
        return;
    }

    // 转换日期对象，处理结束日期范围
    const startDate = startDateStr ? new Date(startDateStr) : null;
    let endDate = endDateStr ? new Date(endDateStr) : null;
    if (endDate) endDate.setDate(endDate.getDate() + 1);

    // 遍历并筛选行
    $('.data-row').each(function() {
        const dateText = $(this).find('td').eq(8).text().trim();
        const rowDateStr = dateText.split(' ')[0];
        const [day, month, year] = rowDateStr.split('/');
        const rowDate = new Date(`${year}-${month}-${day}`);

        let isInRange = true;
        if (startDate && rowDate < startDate) isInRange = false;
        if (endDate && rowDate >= endDate) isInRange = false;

        $(this).toggle(isInRange);
    });
}

关键说明 #

• input type="date"返回的YYYY-MM-DD格式可直接创建日期对象，默认时间为当天0点
• 表格中的DD/MM/YYYY格式需转换为YYYY-MM-DD后再创建日期对象，避免浏览器解析差异
• 给结束日期加1天，确保结束当天的所有行都被包含在筛选范围内
• 支持部分选择：仅选开始日期则显示大于等于该日期的行；仅选结束日期则显示小于等于该日期的行

内容的提问来源于stack exchange，提问作者Arjun-S96