MySQL表中时间与字符串显示为无效日期的问题排查

问题现状 #

数据表存储日期、时间及字符串类型数据，日期字段显示正常，但permission_start_time这类时间字段和justification字符串字段均显示为“Invalid date”。

接口返回示例 #

"permission_date": "2024-03-08T18:08:08.783Z",
"permission_start_date": "2024-03-08T18:08:10.590Z",
"permission_end_date": "2024-03-26T18:08:13.574Z",
"permission_start_time": "04:00 AM", "permission_end_time": "06:00 PM", "justification": "asdf"

表格显示效果 #

原因分析 #

1. 时间字段解析失败：moment(String(value)) 默认无法正确识别 "04:00 AM" 这种带AM/PM的12小时制时间格式，moment自动检测格式失败，导致返回“Invalid date”。
2. 字符串字段误用moment：justification是纯文本字符串，却被传入moment()处理，moment无法将普通字符串解析为日期对象，因此输出“Invalid date”。

解决办法 #

修改TableHelpers中的字段处理逻辑：

1. 修正时间字段的解析格式 #

处理时间字段时，明确指定moment的输入格式为hh:mm A（匹配带AM/PM的12小时制时间），再转成目标格式：

{
  title: this.$t('permission_start_time'),
  type: 'custom-html',
  key: 'permission_start_time',
  modifier: (value) => {
    // 指定输入格式解析，再输出目标格式
    return moment(value, 'hh:mm A').format('hh:mm');
  },
},
{
  title: this.$t('permission_end_time'),
  type: 'custom-html',
  key: 'permission_end_time',
  modifier: (value) => {
    return moment(value, 'hh:mm A').format('hh:mm');
  },
},

2. 移除字符串字段的moment处理 #

justification是纯文本，直接返回原字符串即可：

{
  title: this.$t('justification'),
  type: 'custom-html',
  key: 'justification',
  modifier: (value) => {
    // 直接返回原字符串，无需moment处理
    return value;
  },
},

完整修改后的TableHelpers代码片段 #

export const TableHelpers = {
    data() {
      return {
        tableColumns: [{
            title: this.$t('permission_date'),
            type: 'custom-html',
            key: 'permission_date',
            modifier: (value) => {
              return moment(String(value)).format('YYYY-MM-DD');
            },
          },
          {
            title: this.$t('permission_start_date'),
            type: 'custom-html',
            key: 'permission_start_date',
            modifier: (value) => {
              return moment(String(value)).format('YYYY-MM-DD');
            },
          },
          {
            title: this.$t('permission_start_time'),
            type: 'custom-html',
            key: 'permission_start_time',
            modifier: (value) => {
              return moment(value, 'hh:mm A').format('hh:mm');
            },
          },
          {
            title: this.$t('permission_end_date'),
            type: 'custom-html',
            key: 'permission_end_date',
            modifier: (value) => {
              return moment(String(value)).format('YYYY-MM-DD');
            },
          },
          {
            title: this.$t('permission_end_time'),
            type: 'custom-html',
            key: 'permission_end_time',
            modifier: (value) => {
              return moment(value, 'hh:mm A').format('hh:mm');
            },
          },
          {
            title: this.$t('justification'),
            type: 'custom-html',
            key: 'justification',
            modifier: (value) => {
              return value;
            },
          },
        ]
      }
    }
}

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