ASP.NET Core中使用DataTable时如何显示DateTime属性值

不需要修改后端序列化逻辑、不需要写额外后端格式转换代码，直接在前端DataTable列配置中完成格式化即可，实现成本最低。

问题原因 #

ASP.NET Core接口默认返回的DateTime类型值为ISO 8601标准格式（例：2024-05-20T14:30:00Z），直接渲染会携带T、时区标识等冗余字符，导致显示异常。

实现步骤 #

直接在现有列配置中，你标注的时间属性插入位置（即用户名、地点列之后，操作列之前）新增三个时间列配置，通过render函数在前端完成时间格式化：

$(document).ready(function () {
    $('#DT_load').DataTable({
        "ajax": {
            "url": "/api/Shift",
            "type": "GET",
            "datatype":"json"
        },
        "columns": [
            { "data": "user.name", "width": "20%" },
            { "data": "location.name", "width": "20%" },
            // 三个DateTime属性列，直接前端格式化
            { 
                "data": "StartTime", 
                "width": "15%",
                "render": function (data) {
                    // 显示 年-月-日 时:分 24小时制
                    return new Date(data).toLocaleString('zh-CN', { hour12: false });
                }
            },
            { 
                "data": "EndTime", 
                "width": "15%",
                "render": function (data) {
                    return new Date(data).toLocaleString('zh-CN', { hour12: false });
                }
            },
            { 
                "data": "Added", 
                "width": "15%",
                "render": function (data) {
                    // 如果Added只需要显示日期，用toLocaleDateString即可
                    return new Date(data).toLocaleDateString('zh-CN');
                }
            },
            // 原有操作列保持不变
            {
                "data": "id",
                "render": function (data) {
                    return `<div class="w-75 btn-group" >
                            <a href="/Admin/Shifts/upsert?id=${data}" class="btn btn-success text-white mx-2">
                            <i class="bi bi-pencil-square"></i> </a>
                            <a href="/Admin/Shifts/upsert?id=${data}"  class="btn btn-danger text-white mx-2">
                            <i class="bi bi-trash-fill"></i> </a>
                            </div>`
                },
                "width":"15%"
            },
        ],
        "width":"100%"
    });
});

格式自定义参考 #

• 仅显示日期：new Date(data).toLocaleDateString('zh-CN')，默认输出格式为2024/5/20
• 显示日期+时间12小时制：去掉{ hour12: false }配置即可，会自动带上午/下午标识
• 需要固定yyyy-MM-dd HH:mm格式且不想引入第三方时间库，可以加一个通用格式化函数：

function formatDateTime(dateStr, format = 'yyyy-MM-dd HH:mm') {
    const date = new Date(dateStr);
    const config = {
        'y+': date.getFullYear(),
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (const key in config) {
        if (new RegExp(`(${key})`).test(format)) {
            const value = config[key].toString().padStart(2, '0');
            format = format.replace(RegExp.$1, value);
        }
    }
    return format;
}

在render函数中直接调用return formatDateTime(data)即可得到自定义格式的时间字符串。

注意事项 #

• 不需要修改后端接口的DateTime返回逻辑，原生默认返回的ISO格式时间字符串可以直接被JS的Date对象解析，无需额外转换
• 不需要引入moment、dayjs等第三方时间处理库，原生API完全覆盖常规显示需求
• 列宽可以根据实际显示需求自行调整比例，总和保持100%即可

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