如何在Tabulator中使用Ajax获取的DateTime数据？

你的核心问题是没有为datetime格式化器和编辑器指定明确的输入/输出格式，Luxon无法正确解析你返回的日期字符串，导致显示空白，编辑后也无法正确保存值。

解决方案：修改列配置，添加格式参数 #

Tabulator的datetime格式化器和编辑器依赖Luxon解析日期，必须明确指定inputFormat匹配你JSON返回的日期格式，同时设置outputFormat定义显示和提交的格式。根据你尝试的不同JSON日期格式，对应配置如下：

情况1：JSON返回格式为 "01/02/2025"

{
  title:"DateVal", 
  field:"DateVal",
  sorter:"datetime", 
  width:150, 
  headerFilter:true, 
  formatter:"datetime", 
  editor:"datetime",
  formatterParams: {
    inputFormat: "dd/MM/yyyy", // 匹配JSON的日/月/年格式
    outputFormat: "dd/MM/yyyy" // 前端显示的格式
  },
  editorParams: {
    inputFormat: "dd/MM/yyyy", // 解析原有日期值
    outputFormat: "dd/MM/yyyy", // 编辑后提交给后端的格式
    picker: {
      format: "dd/MM/yyyy" // 日期选择器的显示格式
    }
  }
}

情况2：JSON返回格式为 "01-02-2025 10:30:00"

{
  title:"DateVal", 
  field:"DateVal",
  sorter:"datetime", 
  width:150, 
  headerFilter:true, 
  formatter:"datetime", 
  editor:"datetime",
  formatterParams: {
    inputFormat: "dd-MM-yyyy HH:mm:ss", // 匹配JSON的日-月-年 时:分:秒格式
    outputFormat: "dd/MM/yyyy HH:mm:ss" // 自定义显示格式
  },
  editorParams: {
    inputFormat: "dd-MM-yyyy HH:mm:ss",
    outputFormat: "dd-MM-yyyy HH:mm:ss", // 保持和后端一致的提交格式
    picker: {
      format: "dd/MM/yyyy HH:mm:ss"
    }
  }
}

情况3：JSON返回格式为 "01-02-2025T10:30:00"

{
  title:"DateVal", 
  field:"DateVal",
  sorter:"datetime", 
  width:150, 
  headerFilter:true, 
  formatter:"datetime", 
  editor:"datetime",
  formatterParams: {
    inputFormat: "dd-MM-yyyy'T'HH:mm:ss", // 注意转义T字符
    outputFormat: "dd/MM/yyyy HH:mm:ss"
  },
  editorParams: {
    inputFormat: "dd-MM-yyyy'T'HH:mm:ss",
    outputFormat: "dd-MM-yyyy'T'HH:mm:ss", // 提交时保持ISO格式
    picker: {
      format: "dd/MM/yyyy HH:mm:ss"
    }
  }
}

关键注意事项 #

• 格式字符大小写敏感：MM代表月份（01-12），mm代表分钟；HH是24小时制，hh是12小时制；dd是日期（01-31），yyyy是4位年份。
• 编辑后，editorParams的outputFormat决定了提交给后端的日期格式，需和后端接口预期的格式一致。
• 配置后，日期选择器会自动读取字段原有值（因为inputFormat能正确解析），打开时会显示原有日期而非当日。

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