如何用react-moment转换指定日期格式并在bootstrap-table-next中渲染？

云原生阿岚

2026-5-20

解决React-Moment在Bootstrap-Table-Next中的日期格式化问题

嘿，我来帮你搞定这个日期转换的问题！你现在的问题主要出在**parse属性的格式不匹配原始日期**，还有传值时用错了参数，咱们一步步来修正：

问题分析

你当前的代码里，parse="MM/dd/yyyy HH:mm:ss"写的是目标格式，但react-moment的parse属性是用来告诉组件原始日期的格式的——你的原始日期是14-Mar-2018 08:23:17，对应的格式应该是DD-MMM-YYYY HH:mm:ss；另外，你在Moment组件里传的是{row}，但实际上cell参数才是当前单元格的日期值，row是整行数据，这会导致传入错误的值。

正确的格式化函数写法

import Moment from 'react-moment';

const dateFormatter = (cell) => (
  <Moment 
    parse="DD-MMM-YYYY HH:mm:ss" 
    format="MM/DD/YYYY HH:mm:ss"
  >
    {cell}
  </Moment>
);

在Bootstrap-Table-Next中使用

把这个格式化函数配置到你的列定义里就行，比如：

import BootstrapTable from 'bootstrap-table-next';

const columns = [
  // 其他列配置...
  {
    dataField: 'yourDateField', // 替换成你实际的日期字段名
    text: '格式化后的日期',
    formatter: dateFormatter
  }
];

// 渲染表格组件
<BootstrapTable 
  keyField="id"
  data={yourDataSource}
  columns={columns}
/>