Display human readable dateTime format in ReactJS

Question

I have react component where I am using useMemo to define table structure. My data is coming via API in DateTime (Web API C#). I tried to use moment to convert date Time format but unable to do so.

current time format without moment 2020-12-18T14:00:00

const scheduleColumns = useMemo(
    () => [
      {
        Header: "Site ID",
        accessor: "siteId",
      },
      {
        Header: "Start Time",
        accessor: moment("startTime").fromNow(),
      },
    ],
    []
  );

..Table

    <TableItemsTabs          
        apiUrl={api.myAPI}
        columns={scheduleColumns}
    ></TableItemsTabs>}

I don't mind but this format will be ideal ... 08/12/2020 23:59 — K.Z, Feb 18 '21 at 10:58
But if you're using moment can't you use `.format()` function provided by it? — Germa Vinsmoke, Feb 18 '21 at 11:01
https://stackoverflow.com/questions/15993913/format-date-with-moment-js . Can you check if any of these works? And if you're using `moment` for few things then I'd recommend to use `date-fns`, it's a lighter module in comparison to `moment`. In the same link, you can check the answer by @t_dom93 — Germa Vinsmoke, Feb 18 '21 at 11:02
I have tried this code but not getting result in specify format { Header: "Start Time", accessor: moment().format("startTime, MMMM Do YYYY, h:mm:ss a"), }, — K.Z, Feb 18 '21 at 11:09

score 1 · Answer 1 · answered Feb 18 '21 at 11:09

1

Even found more simpler solution, doesn't even need any module

let a = new Date('2020-12-18T14:00:00');
a.toLocaleString('en-GB');
// Output - "18/12/2020, 14:00:00"

answered Feb 18 '21 at 11:09

Germa Vinsmoke

3,541
4
24
34

i need to use code in inside useMemo as refer in my code? how I can use a.toLocaleString('en-GB'); – K.Z Feb 18 '21 at 11:16
In your `useMemo` you can add it like this --> `accessor: new Date().toLocaleString('en-GB');` – Germa Vinsmoke Feb 18 '21 at 11:18

Display human readable dateTime format in ReactJS

1 Answers1