如何在网页中实现基于日期范围的表格过滤功能-js教程-PHP中文网

如何在网页中实现基于日期范围的表格过滤功能

本文介绍使用原生 JavaScript 实现日期范围过滤的方法：通过两个获取起止日期，解析表格中“Checked Date”列（格式为 DD/MM/YYYY HH:mm）的日期部分，仅比对年月日，动态显示/隐藏符合条件的行。

本文介绍使用原生 javascript 实现日期范围过滤的方法：通过两个 `` 获取起止日期，解析表格中“checked date”列（格式为 dd/mm/yyyy hh:mm）的日期部分，仅比对年月日，动态显示/隐藏符合条件的行。

要在网页中实现精准、可靠的日期范围过滤，关键在于统一日期格式解析与安全的 DOM 操作逻辑。由于后端 Razor 渲染的日期字符串为 dd/MM/yyyy HH:mm（如 27/10/2023 12:17），而原生输出的是 ISO 格式 YYYY-MM-DD（如 2023-10-27），二者需通过标准化转换才能正确比较。

✅ 核心实现步骤

提取并标准化日期字符串
从第 9 列（
）中获取 27/10/2023 12:17，仅取 27/10/2023 部分，并转换为 YYYY-MM-DD 格式（如 2023-10-27），以便 new Date() 正确解析。
构建时间戳进行范围比对
将起始/结束日期输入值和表格中每行的“Checked Date”均转为毫秒时间戳（.getTime()），避免字符串比较陷阱。

批量控制行显隐
使用 display: table-row / none 控制

的可见性，确保样式兼容 Bootstrap 表格布局。

以下是完整、可直接集成的 Vanilla JS 实现（已适配 Bootstrap + Razor 环境）：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

<!-- HTML 结构（推荐移除内联 onclick，改用事件委托） -->
<div class="mb-3">
  <label class="me-2">Start Date:</label>
  <input type="date" id="startDate" class="date-picker me-3"><label class="me-2">End Date:</label>
  <input type="date" id="endDate" class="date-picker me-3"><button id="filterBtn" class="btn btn-primary">Filter</button>
  <button id="resetBtn" class="btn btn-secondary ms-2">Reset</button>
</div>

Job No	Company	Permit No	R No	TM Company	TM Type	Address	Checked By	Checked Date	Comments

// 工具函数：将 dd/MM/yyyy 格式转为 YYYY-MM-DD（兼容 new Date()）
const parseUKDate = (dateStr) => {
  const match = dateStr.trim().match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
  if (!match) return null;
  const [, day, month, year] = match;
  // 注意：月份从 0 开始，故 month-1
  return new Date(year, month - 1, day).toISOString().split('T')[0];
};

// 过滤主函数
const filterByDate = () => {
  const startDateInput = document.getElementById('startDate');
  const endDateInput = document.getElementById('endDate');

  const startVal = startDateInput.value;
  const endVal = endDateInput.value;

  if (!startVal || !endVal) {
    alert('Please select both Start and End dates.');
    return;
  }

  const startDate = new Date(startVal).getTime();
  const endDate = new Date(endVal).getTime();

  // 获取所有数据行（建议添加 tbody 包裹，提高选择器稳定性）
  const rows = document.querySelectorAll('tbody .data-row');
  rows.forEach(row => {
    const dateCell = row.querySelector('td:nth-child(9)');
    if (!dateCell) return;

    const ukDateStr = dateCell.textContent.trim();
    const isoDate = parseUKDate(ukDateStr);
    if (!isoDate) {
      row.style.display = 'none';
      return;
    }

    const rowDate = new Date(isoDate).getTime();
    row.style.display = (rowDate >= startDate && rowDate  {
  document.getElementById('startDate').value = '';
  document.getElementById('endDate').value = '';
  document.querySelectorAll('tbody .data-row').forEach(r => {
    r.style.display = 'table-row';
  });
};

// 绑定事件（脱离内联 onclick，更易维护）
document.getElementById('filterBtn').addEventListener('click', filterByDate);
document.getElementById('resetBtn').addEventListener('click', resetFilter);

// 可选：支持回车触发过滤
document.addEventListener('keydown', e => {
  if (e.key === 'Enter' && (e.target.id === 'startDate' || e.target.id === 'endDate')) {
    filterByDate();
  }
});

⚠️ 注意事项与最佳实践

时区安全：new Date("2023-10-27") 默认按本地时区解析；若需 UTC 一致性，建议后端返回 ISO 时间戳或统一使用 new Date(Date.UTC(...))。
空值鲁棒性：代码已处理 null/空字符串/格式异常的 Checked Date，避免 Invalid Date 报错。
性能优化：对于千级行数据，可考虑 DocumentFragment 批量操作或虚拟滚动，但百行内无需额外优化。
Bootstrap 兼容性：display: table-row 完全兼容 .table 类，不影响响应式断点或斑马纹样式。
Razor 渲染建议：为提升可维护性，可在上添加 data-checked-date="@firstJob.TbDate?.ToString("yyyy-MM-dd")" 属性，直接读取标准格式，省去前端解析逻辑。
✅ 总结：本方案不依赖 jQuery，纯原生实现，轻量、可靠、易调试。重点在于日期格式归一化与DOM 批量操作，兼顾可读性与生产可用性。上线前请务必在多浏览器（尤其 Safari）验证日期解析行为。