如何在 jQuery DataTables 中格式化日期

Question

我正在使用 jQuery DataTables 并且我有多个带有日期的列，当前数据采用这种格式

2020-06-18 14:32:45.707

并且我想对其进行格式化并将其显示为

18/06/2020 14.32

。

我在DataTables中应用了datetime插件，但仍然无法使其工作。

目前我正在使用：

render: function(data) {
  return moment(data).format('DD/MM/YYYY HH:mm');
}

效果很好。但我想使用渲染：

render: $.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')

我已经包含了moment.js和datetime.js，如文档所说，我应该申请：

$.fn.dataTable.render.moment(to);

当我使用此方法时，我的日期在表格中显示为“无效日期”。 下面是一个演示。

你能解释一下我做错了什么吗？：

$.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')

我有另一种方法，但我想从错误中吸取教训，因为我花了很多时间调查但无法找出问题所在。非常感谢。

$(document).ready(function() {
  $('#example').DataTable({
    "columnDefs": [{
      //render: $.fn.dataTable.render.moment( 'DD/MM/YYYY HH:mm' )
      "render": function(data) {
        return moment(data).format('DD/MM/YYYY HH:mm');
      },
      "targets": 1
    }]
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>

<table id="example" class="table table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>date before format</th>
      <th>date after format</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-06-18 14:32:45.707</td>
      <td>2020-06-18 14:32:45.707</td>
    </tr>
  </tbody>
</table>

Answer 1

您的问题在这里：

// Argument shifting
if (arguments.length === 1) {
  locale = 'en';
  to = from;
  from = 'YYYY-MM-DD';
}

默认的FROM是

'YYYY-MM-DD'

，您需要指定您的源格式。

const FROM_PATTERN = 'YYYY-MM-DD HH:mm:ss.SSS';
const TO_PATTERN   = 'DD/MM/YYYY HH:mm';

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [{
      render: $.fn.dataTable.render.moment(FROM_PATTERN, TO_PATTERN),
      targets: 1
    }]
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>

<table id="example" class="table table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>date before format</th>
      <th>date after format</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020-06-18 14:32:45.707</td>
      <td>2020-06-18 14:32:45.707</td>
    </tr>
  </tbody>
</table>

Answer 2

我有 2 列，以下代码运行良好。

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [{
      targets: [1,2], render: DataTable.render.datetime('M/DD/YYYY')
    }]
  });
});