使用Datepicker实现DataTables日期范围筛选失败求助

首先得提醒你：你的代码里重复引入了不同版本的jQuery，这大概率会导致Datepicker和DataTables出现功能冲突，先把其中一个删掉，比如保留3.3.1版本的就够用了。

先给你修正后的基础依赖引入代码：

<!-- 只保留一个jQuery版本，避免冲突 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<!-- 引入jQuery UI Datepicker的样式和脚本（如果之前没加的话） -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

接下来一步步实现日期范围筛选的功能：

1. 添加日期选择器的HTML结构 #

在你的表格上方加上两个日期输入框和操作按钮：

<div class="date-filter-group">
  <label>开始日期：</label>
  <input type="text" id="start-date" placeholder="点击选择">
  <label>结束日期：</label>
  <input type="text" id="end-date" placeholder="点击选择">
  <button id="apply-filter">筛选</button>
  <button id="reset-filter">重置</button>
</div>

<!-- 你的DataTables表格 -->
<table id="target-table" class="display">
  <thead>
    <tr>
      <th>ID</th>
      <th>内容</th>
      <th>日期</th> <!-- 假设这是你要筛选的日期列 -->
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 你的表格数据行 -->
  </tbody>
</table>

2. 编写核心的筛选逻辑脚本 #

$(document).ready(function() {
  // 初始化Datepicker，确保日期格式和表格里的一致（这里用yyyy-mm-dd示例）
  $("#start-date, #end-date").datepicker({
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true
  });

  // 初始化DataTables实例
  const table = $("#target-table").DataTable();

  // 绑定筛选按钮点击事件
  $("#apply-filter").on("click", function() {
    filterTableByDateRange(table);
  });

  // 绑定重置按钮点击事件
  $("#reset-filter").on("click", function() {
    $("#start-date, #end-date").val("");
    table.search("").draw(); // 清空所有筛选，恢复原始表格
  });

  // 自定义日期范围筛选函数
  function filterTableByDateRange(tableInstance) {
    const startVal = $("#start-date").val();
    const endVal = $("#end-date").val();

    // 向DataTables注册自定义筛选规则
    $.fn.dataTable.ext.search.push(
      function(settings, rowData, rowIndex) {
        // rowData[2]对应表格中日期列的索引（从0开始计数，根据你的实际列位置调整）
        const rowDateStr = rowData[2];
        const rowDate = new Date(rowDateStr);
        const startDate = startVal ? new Date(startVal) : null;
        const endDate = endVal ? new Date(endVal) : null;

        // 筛选逻辑：符合日期范围的行才保留
        if (
          (startDate === null || rowDate >= startDate) &&
          (endDate === null || rowDate <= endDate)
        ) {
          return true;
        }
        return false;
      }
    );

    // 重新绘制表格，应用筛选规则
    tableInstance.draw();

    // 用完就移除自定义筛选，避免影响后续其他筛选操作
    $.fn.dataTable.ext.search.pop();
  }
});

关键注意事项 #

• 日期格式必须统一：Datepicker的输出格式（dateFormat参数）要和表格中日期列的格式完全匹配，比如表格里是dd/mm/yyyy，就把dateFormat改成dd/mm/yy。如果表格日期包含时间，筛选时可以只提取日期部分，比如new Date(rowDateStr.split(" ")[0])。
• 列索引要对应：rowData[2]里的数字要替换成你实际日期列的索引（从0开始算），比如日期是第1列就写rowData[0]。
• 避免重复依赖：一定要保证只引入一个jQuery版本，多个版本会导致Datepicker或DataTables失效。

这样就能完美实现通过Datepicker选择日期范围来筛选DataTables表格的需求了。

内容的提问来源于stack exchange，提问作者Robin Richardson Kidder