Tabulator 5.4日期列排序功能失效问题求助

问题现象 #

独立HTML页面中Tabulator表格可正常展示，但OrderDate列排序功能无法激活，更换多种日期格式（如2025/03/24）后问题仍未解决，其余字符串列排序功能正常。

问题原因 #

日期排序解析失败导致：

• 代码中给OrderDate列配置的日期格式符为MM/DD/YY，但实际数据中的年份是四位（如2025），YY仅匹配两位年份，无法正确解析四位年份的日期，导致排序逻辑无法触发。
• Tabulator 5.x版本配合Luxon使用时，日期格式符严格遵循Luxon规则，四位年份必须用YYYY。

修复步骤 #

将OrderDate列的sorterParams中的format值从"MM/DD/YY"修改为"MM/DD/YYYY"，确保格式符与实际日期的年份位数匹配。

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator Table</title>
    <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luxon@3.6.0/build/global/luxon.min.js"></script>
  </head>
<body>
    <button id="fetch-data-btn">Load Data3</button>
    <div id="searchTable"></div>
<script>
    document.getElementById("fetch-data-btn").addEventListener("click", function () {
        searchIt();
    });
    const data3 = [
      {DocNum:"IN100858",OrderDate:"03/19/2025",Status:"Invoice"},
      {DocNum:"IN100857",OrderDate:"03/18/2025",Status:"Void"},
      {DocNum:"IN100859",OrderDate:"03/20/2025",Status:"Invoice"},
    ]
    function searchIt() {
      populate (data3)
    }
    function populate(data) {
        const searchNewTabulatorColumns = defineColumns();
        let table = new Tabulator("#searchTable", {
            data: data,
            layout: "fitColumns",
            columnDefaults: {
                minWidth: 70,
                headerSort: false,
            },
            columns: searchNewTabulatorColumns,
        });
    }
    function defineColumns() {
        return [
            { title: "No.", field: "DocNum", sorter: "string", headerSort: true },
            { title: "Date", field: "OrderDate", sorter: "date", headerSort: true, sorterParams:{format:"MM/DD/YYYY"} },
            { title: "Status", field: "Status", sorter: "string", headerSort: true }
        ];
    };
</script>
</body>
</html>

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