在Tabulator中使用自定义日期过滤器实现格式化日期筛选

核心需求 #

从MySQL获取的日期格式为Y-m-d，需在Tabulator表格中以d/m/Y格式展示，同时支持表头过滤器按d/m/Y格式输入筛选。

实现步骤 #

1. 自定义日期格式化函数

将后台返回的Y-m-d字符串转换为d/m/Y格式用于表格显示：

function formatDate(cellValue) {
  if (!cellValue) return "";
  const [year, month, day] = cellValue.split("-");
  return `${day}/${month}/${year}`;
}

2. 自定义日期过滤器

处理用户输入的d/m/Y格式日期，转换为可与后台Y-m-d数据对比的逻辑：

精确匹配版本

function dateFilter(headerValue, rowValue) {
  if (!headerValue || !rowValue) return true;

  const [inputDay, inputMonth, inputYear] = headerValue.split("/");
  const inputDate = new Date(inputYear, inputMonth - 1, inputDay);

  const [rowYear, rowMonth, rowDay] = rowValue.split("-");
  const rowDate = new Date(rowYear, rowMonth - 1, rowDay);

  return inputDate.getTime() === rowDate.getTime();
}

模糊匹配版本（支持输入05/2023匹配所有2023年5月的日期）

function dateFilter(headerValue, rowValue) {
  if (!headerValue) return true;

  const inputStr = headerValue.replace(/\s/g, "");
  const [rowYear, rowMonth, rowDay] = rowValue.split("-");
  const rowDateStr = `${rowDay}/${rowMonth}/${rowYear}`;

  return rowDateStr.startsWith(inputStr);
}

3. Tabulator列配置

在日期列配置中绑定格式化函数与自定义过滤器：

const table = new Tabulator("#example-table", {
  columns: [
    // 其他列配置
    {
      title: "日期",
      field: "date",
      formatter: formatDate, // 显示格式化后的日期
      headerFilter: "input", // 使用文本输入框作为筛选器
      headerFilterFunc: dateFilter, // 绑定自定义筛选逻辑
      headerFilterPlaceholder: "d/m/Y" // 提示输入格式
    }
  ],
  // 其他表格配置
});

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
</head>
<body>
  <div id="example-table"></div>

  <script>
    // 模拟MySQL返回的数据
    const tableData = [
      { id: 1, name: "张三", date: "2023-05-10" },
      { id: 2, name: "李四", date: "2023-06-15" },
      { id: 3, name: "王五", date: "2024-01-20" }
    ];

    // 日期格式化函数
    function formatDate(cellValue) {
      if (!cellValue) return "";
      const [year, month, day] = cellValue.split("-");
      return `${day}/${month}/${year}`;
    }

    // 自定义日期过滤器（精确匹配）
    function dateFilter(headerValue, rowValue) {
      if (!headerValue || !rowValue) return true;

      const [inputDay, inputMonth, inputYear] = headerValue.split("/");
      const inputDate = new Date(inputYear, inputMonth - 1, inputDay);

      const [rowYear, rowMonth, rowDay] = rowValue.split("-");
      const rowDate = new Date(rowYear, rowMonth - 1, rowDay);

      return inputDate.getTime() === rowDate.getTime();
    }

    // 初始化表格
    const table = new Tabulator("#example-table", {
      data: tableData,
      columns: [
        { title: "ID", field: "id", width: 80 },
        { title: "姓名", field: "name", width: 120 },
        {
          title: "日期",
          field: "date",
          formatter: formatDate,
          headerFilter: "input",
          headerFilterFunc: dateFilter,
          headerFilterPlaceholder: "输入d/m/Y格式"
        }
      ]
    });
  </script>
</body>
</html>

示例中表格会以d/m/Y格式展示日期，输入框输入对应格式日期即可完成筛选；如需模糊匹配，替换dateFilter为模糊版本即可。

内容的提问来源于stack exchange，提问作者Matt