Question

139

How to format date in ant table?

rated 0 times [ 145] [ 6] / answers: 1 / hits: 10007 / 4 Years ago, fri, may 1, 2020, 12:00:00

I have a table with 6 columns, one of these columns is a date, The default display format of the date is 2020-04-30T21:30:07.000Z I want to change it to 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} />

I believe there should be a way to pass date format to the columns. I looked into the ant table documentations but didn't find a solution.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ariel

Add To Favorites

Follow

Total Points: 523

Total Questions: 111

Total Answers: 100

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

ariel questions

1 Typescript with Webpack - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Tue, May 24, 22, 00:00, 2 Years ago

1 why I can't delete .next folder in nextjs project

Thu, Mar 31, 22, 00:00, 2 Years ago

1 How to use NestJS Reflector inside a Custom Decorator?

Tue, Jan 5, 21, 00:00, 3 Years ago

1 ASP.NET Core 3.1 cannot process Axios request until ApiController attribute is added

Mon, Jan 20, 20, 00:00, 4 Years ago

1 Custom date picker in Vuetify

Thu, Dec 19, 19, 00:00, 5 Years ago

View All

answered 4 Years ago isaac · Accepted Answer

After looking into the antd documentation (https://ant.design/components/table/#API) it doesn't seems to have a property to handle your case. You should duplicate your column invoices_date to invoices_date_printabble which will have the good format to be printed.

invoices_list.map(el => {

    let date = new Date(el.invoices_date)

    el.invoices_date_printabble = date.getDay()+/+date.getMonth()+/+date.getFullYear()

})

And now your list is printable.

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: `invoices_date_printabble`},

  ]



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