如何对DataTables中含mm/dd/yyyy与区间格式的日期列排序？

核心思路 #

针对同时包含单个日期（mm/dd/yyyy）和日期区间（mm/dd/yyyy - mm/dd/yyyy）的列，通过自定义列渲染逻辑，保留原始显示内容的同时，提取起始日期作为排序依据，让DataTables按指定规则完成排序。

具体实现代码 #

HTML部分（无需修改）

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
  </head>
  <body>
    <table id="example_full1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;">
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12/16/2007</td>
          <td>test1</td>
          <td>5</td>
          <td>16</td>
        </tr>
        <tr>
          <td>09/08/2014 - 09/12/2014</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td>08/16/2020</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td>08/16/2021 - 08/19/2021</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td>11/14/2012</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

JavaScript部分（修改后的核心代码）

$(document).ready(function() {
  $('#example_full1').DataTable({
    responsive: true,
    fixedHeader: true,
    order: [[0, 'desc']],
    columnDefs: [
      {
        targets: 0, // 目标为第一列（索引从0开始）
        render: function(data, type, row) {
          // 仅在排序/类型检测时处理数据，显示时保留原始内容
          if (type === 'sort' || type === 'type') {
            // 提取起始日期：拆分字符串取第一个部分并去除空格
            const startDate = data.split(' - ')[0].trim();
            // 转换为时间戳，确保排序逻辑正确
            return new Date(startDate).getTime();
          }
          return data;
        }
      }
    ]
  });
});

方案优势 #

1. 无侵入显示：页面上的日期格式完全保留，不会改变用户看到的内容
2. 自动兼容两种格式：不管是单个日期还是区间日期，都会自动提取第一个日期作为排序依据
3. 性能高效：仅在排序、类型检测等必要场景处理数据，不影响页面渲染速度

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