Bootstrap-table日期列排序与过滤失效问题求助

我用Bootstrap Table实现了带日期列的表格，已开启排序和过滤功能，但存在以下问题：

• 过滤异常：手动输入日期或通过datepicker选择日期后，无法得到正确的过滤结果
• 排序异常：按字符串规则排序，而非日期逻辑排序
• 尝试给列添加data-date-format="YYYY-MM-DD"属性无效，自定义排序函数时部分控制器返回的日期转换为Date对象会返回NaN，怀疑是dd-mm-yyyy格式不被Bootstrap Table兼容，求配置方案支持该格式的日期排序与过滤。

相关代码 #

表格HTML代码 #

<table id="tbl" class="table table-bordered table-striped table-hover"
       data-toolbar="#toolbar"
       data-toggle="table"
       data-show-toggle="true"
       data-show-fullscreen="true"
       data-show-columns="true"
       data-show-columns-toggle-all="true"
       data-detail-view="false"
       data-show-export="true"
       data-export-types="['json', 'xml', 'csv' , 'txt' , 'sql', 'xlsx' , 'pdf' ]"
       data-export-data-type="all"
       data-click-to-select="false"
       data-minimum-count-columns="2"
       data-show-pagination-switch="false"
       data-pagination="true"
       data-side-pagination="client"
       data-page-list="[10, 25, 50, 100, all]"
       data-show-footer="true"
       data-filter-control="true"
       data-cache="false"
       data-show-search-clear-button="true">

<th data-field="fechaIncorporacion" data-sortable="true" data-filter-control="datepicker">Fecha Incorporacion</th>
</table>

尝试添加的属性 #

data-date-format="YYYY-MM-DD"

自定义排序代码 #

<th data-field="myDate" data-sortable="true" data-filter-control="datepicker" data-sorter="myDateSorter">My Date</th>

window.myDateSorter= function myDateSorter(a, b) {
    var a = new Date(a).getTime() - new Date(b).getTime();
    return a;
}

1. 修复日期排序问题 #

问题根源是JavaScript的Date构造函数无法正确解析dd-mm-yyyy格式的字符串，导致转换为时间戳时返回NaN。需要自定义解析逻辑：

修改后的自定义排序函数 #

window.myDateSorter = function(a, b) {
    // 解析dd-mm-yyyy格式的日期字符串为时间戳
    const parseDDMMYYYY = (dateStr) => {
        if (!dateStr) return 0;
        const [day, month, year] = dateStr.split('-');
        // 月份从0开始，需减1
        return new Date(year, month - 1, day).getTime();
    };
    const timeA = parseDDMMYYYY(a);
    const timeB = parseDDMMYYYY(b);
    return timeA - timeB;
};

绑定到列上 #

更新表头代码，将自定义排序函数绑定到目标列：

<th data-field="fechaIncorporacion" 
    data-sortable="true" 
    data-filter-control="datepicker" 
    data-sorter="myDateSorter">Fecha Incorporacion</th>

2. 修复日期过滤问题 #

Bootstrap Table默认的datepicker过滤逻辑不支持dd-mm-yyyy格式，需要自定义过滤函数，并配置datepicker输出该格式：

步骤1：自定义过滤函数 #

window.dateFilter = function(value, row, column) {
    const filterInput = column.filterControl.value.trim();
    if (!filterInput) return true; // 过滤框为空时显示所有行

    // 通用日期解析函数（处理dd-mm-yyyy格式）
    const parseDate = (dateStr) => {
        const parts = dateStr.split('-');
        if (parts.length !== 3) return null;
        return new Date(parts[2], parts[1] - 1, parts[0]);
    };

    const rowDate = parseDate(row[column.field]);
    const filterDate = parseDate(filterInput);

    if (!rowDate || !filterDate) return false;

    // 精确匹配日期（忽略时间部分）
    return rowDate.toDateString() === filterDate.toDateString();
};

步骤2：绑定过滤函数到列 #

更新表头，添加自定义过滤属性：

<th data-field="fechaIncorporacion" 
    data-sortable="true" 
    data-filter-control="datepicker" 
    data-sorter="myDateSorter"
    data-filter-custom="dateFilter">Fecha Incorporacion</th>

步骤3：配置datepicker输出dd-mm-yyyy格式 #

如果使用Bootstrap Datepicker，初始化时设置格式：

$(function() {
    // 给所有表格的datepicker过滤控件设置格式
    $('.bootstrap-table-filter-control-datepicker').datepicker({
        format: 'dd-mm-yyyy',
        autoclose: true
    });
});

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