如何在 React Bootstrap table 的列定义中使用 moment 库？

Question

我的代码如下所示：

const columns = [{
  dataField: 'Id',
  text: 'Order ID'
}, {
  dataField: 'Date',
  text: 'Date'
}, {
  dataField: 'Total',
  text: 'Total'
}];

并且它在 React Bootstrap table 中显示日期。但是，日期是我不需要的 Json 格式。

我尝试过使用 moment 库以这种方式格式化日期：

const columns = [{
  dataField: 'Id',
  text: 'Order ID'
}, {
  dataField: '{moment(Date).format("DD-MM-YYYY")}',
  text: 'Date'
}, {
  dataField: 'Total',
  text: 'Total'
}];

但是，日期栏是空的。

如何使用 moment 库来格式化 React Bootstrap table 库中列的日期？或者还有其他方法吗？

Answer 1

column.formatter can help you. There's a online demo: this

Answer 2

这里是渲染方法中的示例代码

render () {
        let columns = []
        columns = [
         { name: 'createAt',
        displayName: 'my-Date',
        dataFormat: function callback (cell, row, rowIndex, colIndex) { moment(cell).format('DD.MM.YYYY h:mm') },
        hideFilter: true,
        isKey: true,
        width: '140'
    }]

Answer 3

我找到了一个方法希望你喜欢这个...

import moment from "moment";

const Column = [
  {
    Header: "name",
    accessor: "name",
  },
  {
    Header: "ticker",
    accessor: "ticketref",
  },
  {
    Header: "Date",
    accessor: (data) => moment(data.traded_on).format("L"),  // you can pass your date as props and manupulate accordingly..
  },
  {
    Header: "Qty- Quantity",
    accessor: "quantity",
  },
  {
    Header: "Price",
    accessor: "price",
  },
  {
    Header: "Amount",
    accessor: "settlement_amount",
  },
];

export { Column };

如何在 React Bootstrap table 的列定义中使用 moment 库？

How to use the moment library in React Bootstrap table's column definition?

momentjs

react-bootstrap-table