如何在jQuery数据表中设置日期格式
我使用的是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:
render: $.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')
moment.js和datetime.js如documentation所说,我应该申请:
$.fn.dataTable.render.moment(to);
当我使用此方法时,我的日期在我的表格中显示为"无效日期"。 下面是一个演示。
您能给我解释一下我哪里做错了吗?:
$.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')
我有另一种有效的方法,但我想从我的错误中学习,因为我花了很多时间调查,但找不到问题。非常感谢。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">$(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>
解决方案
您的问题在此:
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
}
默认发件人为'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>
相关文章