如何在yadcf插件中使用moment.js实现自定义日期格式排序？

我完全懂你的困扰——yadcf默认会按筛选选项的文本做字母排序，而dd.mm.yyyy这种格式的日期按字母排肯定会乱序。不过借助moment.js，我们可以给yadcf指定自定义排序逻辑，让它按照真实的时间先后顺序来排列日期选项。

核心思路 #

yadcf提供了custom_sort_func配置项，允许我们自定义筛选选项的排序规则。我们可以用moment.js把日期字符串解析成可比较的日期对象，然后基于时间先后进行排序。

具体实现步骤 #

假设你的日期列是表格的第0列（请根据实际情况调整targets和column_number的数值），以下是完整的配置示例：

// 先初始化DataTables（你已经配置好moment的表格排序，这里仅作参考）
const table = $('#your-table-id').DataTable({
  columnDefs: [
    {
      targets: [0], // 日期列的索引
      type: 'date',
      // 表格排序时用moment转成可排序的格式（你应该已经有类似配置）
      render: function(data, type) {
        if (type === 'sort') {
          return moment(data, 'DD.MM.YYYY').unix(); // 转成时间戳或者YYYYMMDD格式都可以
        }
        return data;
      }
    }
  ]
});

// 初始化yadcf，重点配置日期列的排序逻辑
yadcf.init(table, [
  {
    column_number: 0, // 对应日期列
    filter_type: 'select', // 如果你用的是下拉筛选器，其他类型可类似适配
    sort_as: 'custom', // 告诉yadcf使用自定义排序函数
    custom_sort_func: function(a, b) {
      // 用moment解析两个日期字符串
      const dateA = moment(a, 'DD.MM.YYYY');
      const dateB = moment(b, 'DD.MM.YYYY');
      
      // 比较日期先后，返回排序所需的-1、0、1
      if (dateA.isBefore(dateB)) {
        return -1;
      } else if (dateA.isAfter(dateB)) {
        return 1;
      }
      return 0;
    }
  }
]);

关键说明 #

• sort_as: 'custom'必须设置，这样yadcf才会调用我们的自定义排序函数。
• custom_sort_func接收两个参数a和b，对应筛选器里的两个日期选项，我们用moment解析后，通过isBefore和isAfter方法判断先后，返回标准的排序结果值。
• 确保moment.js能正确解析你的日期格式，这里用'DD.MM.YYYY'对应dd.mm.yyyy的格式，moment对大小写的日/月标识兼容（DD和dd都代表两位日期，MM代表两位月份）。

如果你的筛选器类型不是select（比如range_date），核心逻辑依然是用moment解析日期后比较，只需调整对应的yadcf配置项即可。

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