Tabulator.js 5.2带有luxon.js的datetime格式化程序，如何为Unix时间戳配置inputFormat
Tabulator.js 5.2带有luxon.js的datetime格式化程序，如何为Unix时间戳配置inputFormat
提问于 2022-07-07 13:51:39
我有一个带有unix时间戳的数据集，希望显示一个可读的日期。我需要配置哪个inputFormat (使用表5.2)？
我将从tabator4.9切换到5.2，这也会将用于formatter:"datetime"的库从moment.js更改为luxon.js。有了moment.js，下面的formatterParams就奏效了。
formatterParams:{
inputFormat:"unix",
outputFormat:"DD/MM/YY HH:mm",
invalidPlaceholder:"(invalid date)"
}对于luxon.js，这是行不通的，我也不知道要配置哪个inputFormat。
编辑：
表的有关部分
var event_table = new Tabulator("#events-table", {
height: "750",
layout: "fitDataTable",
movableRows: true,
ajaxURL: [],
columns: [
{ rowHandle: true, formatter: "handle", headerSort: false, frozen: true, width: 30, minWidth: 30 },
{
title: "Time", field: "timestamp", headerFilter: "input", formatter: "datetime", formatterParams: {
inputFormat: "unix",
outputFormat: "DD/MM/YY HH:mm",
invalidPlaceholder: "(invalid date)"
}
},
{ title: "Typ", field: "type", headerFilter: "list", headerFilterParams: { values: true } }
]
});数据：
[
{
"timestamp": 1655845814046,
"type": "weight"
},
{
"timestamp": 1655845931252,
"type": "weight"
},
{
"timestamp": 1655877784130,
"type": "amount"
},
{
"timestamp": 1655877828127,
"type": "weight"
}
]Stack Overflow用户
回答已采纳
发布于 2022-07-08 10:51:02
请注意，"unix"不是由制表器4.9“正式”支持的，我在DateTime内置格式化程序中没有提到它。
这是因为制表器使用var newDatetime = moment(value, inputFormat);来解析单元值。因此，制表器使用非常宽容的moment(String, String)，在您的示例中，它正确地解析unix时间戳，因为用作格式令牌的"unix"字符串包含表示Unix时间戳的令牌的x。
鲁迅暂时没有对应的x，你应该用DateTime.fromMillis来代替解析Unix时间戳。似乎没有办法使用DateTime.fromMillis使用DateTime格式化程序的5.2版本的制表器(参见它的代码)。
您可以使用自定义格式化程序
除了内置格式化程序外，还可以使用自定义格式化程序函数定义格式化程序。 格式化程序函数接受两个参数，被格式化单元格的CellComponent和列定义中的
formatterParams选项。 函数必须返回单元格的内容，包括单元格的文本值、有效的HTML或DOM节点。
示例：
var tabledata = [{
"timestamp": 1655845814046,
"type": "weight"
},
{
"timestamp": 1655845931252,
"type": "weight"
},
{
"timestamp": 1655877784130,
"type": "amount"
},
{
"timestamp": 1655877828127,
"type": "weight"
}
];
var event_table = new Tabulator("#events-table", {
data: tabledata,
height: "750",
layout: "fitDataTable",
//movableRows: true,
//ajaxURL: [],
columns: [{
rowHandle: true,
formatter: "handle",
headerSort: false,
frozen: true,
width: 30,
minWidth: 30
},
{
title: "Time",
field: "timestamp",
headerFilter: "input",
formatter: function(cell, formatterParams, onRendered) {
try {
let dt = luxon.DateTime.fromMillis(cell.getValue());
return dt.toFormat(formatterParams.outputFormat);
} catch (error) {
return formatterParams.invalidPlaceholder;
}
},
formatterParams: {
outputFormat: "dd/MM/yy HH:mm",
invalidPlaceholder: "(invalid date)"
}
},
{
title: "Typ",
field: "type",
headerFilter: "list",
headerFilterParams: {
values: true
}
}
]
});<link href="https://unpkg.com/tabulator-tables@5.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.7/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.4.0/build/global/luxon.min.js"></script>
<div id="events-table"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72899053
复制相关文章
相似问题
腾讯云开发者
