首页 > 解决方案 > 如何在蚂蚁表中格式化日期?

问题描述

我有一个有 6 列的表格,其中一列是日期,日期的默认显示格式是2020-04-30T21:30:07.000Z我想将其更改为30-04-2020.

export const columns = [
    { title: `ID`, dataIndex: `invoice_id`},
    { title: `Invoice Number`, dataIndex: `invoice_number` },
    { title: `Amount`, dataIndex: `invoice_amount`},
    { title: `Store Name`, dataIndex: `store_name`},
    { title: `Supplier Name`, dataIndex: `supplier_name`},
    { title: `Creation Date`, dataIndex: `invoice_date`,},
  ]

<Table bordered columns={columns} dataSource={invoices_list} />

我相信应该有一种方法可以将日期格式传递给列。我查看了ant表格文档,但没有找到解决方案。

标签: javascriptdatatableantd

解决方案


实现它的另一种方法是为日期列定义“渲染”,例如

{
 title: 'Published at',
 dataIndex: 'publishedAt',
 key: 'publishedAt',
 width: 210,
 render: ((date:string) => getFullDate(date)) }

只需使用日期格式化函数 getFullDate。在你的情况下,它看起来像

export const getFullDate = (date: string): string => {
  const dateAndTime = date.split('T');

  return dateAndTime[0].split('-').reverse().join('-');
};

在这种情况下,您还将避免使用外部库,并且将具有在其他地方格式化日期的功能。


推荐阅读