In React how to convert UTC dateTime to more readable string inside the table

Question

I have react component which showing records in the table. I have use 'useMemo' to define table structure and data. Some of its fields are date format which showing date like '2020-12-08T07:00:00Z'. I want to convert it to more friendly reading i.e. DD:MM:YYYY :Time?

Component

const EziSchedule = () =>{

const scheduleColumns = useMemo(
    () => [
      {
        Header: "Schedule Id",
        accessor: "eziScheduleId",
      },
      {
        Header: "Start Time",
        accessor: "startTime",   //need to convert??
      },
      {
        Header: "End Time",
        accessor: "endTime",    //need to convert??
      },
    ],
    []
  );

  return (
    <div>
    <h3>Schedule</h3>
    {props.searchCriteria&& props.searchCriteria.siteId!=0 &&

    <TableItem          
        apiUrl={api.EziTrackerSchedule}
        columns={scheduleColumns}
        itemType={EcpItemTypes.EziTracker}
        customParams= {props.searchCriteria}
        selectedRow={selectedScheduleRow}
    ></TableItems>}

Error

I have tried below code in useMemo:[ ... but it throw exception

       {
        Header: "Login DateTime",
        accessor: moment("loginDateTime","DD MM YYYY hh:mm:ss"),
      },

I have tried accessor: moment("loginDateTime","DD MM YYYY hh:mm:ss"), it did not work — K.Z, Jan 05 '21 at 17:36
I think the formatting logic should go at the time of rendering which is encapsulated in TableItem component. — Nishant, Jan 05 '21 at 17:47

ToMatt · Answer 1 · 2021-01-05T17:52:13.660

0

I can't comment, so...

Try this:

var d = new Date(YOUR DATE HERE);
var n = d.toLocaleString(CODE YOUR COUNTRY);

so, will be this way:

var d = new Date('2020-12-08T07:00:00Z');
var n = d.toLocaleString('pt-BR');

The result will be: 08/12/2020 04:00:00

Source (Here there are all the country codes): https://www.w3schools.com/jsref/jsref_tolocalestring.asp

edited Jan 05 '21 at 17:52

answered Jan 05 '21 at 17:45

ToMatt

43
7

With one line will be: `new Date('DATE HERE').toLocaleString('CODE HERE');` – ToMatt Jan 05 '21 at 17:51

score 0 · Answer 2 · answered Jan 05 '21 at 17:47

If you want to output a variable with a string containing a date with momentjs you could go with moment(date).format(string). Please refer to the momentjs docs

moment().format();                                // "2014-09-08T08:02:17-05:00" (ISO 8601, no fractional seconds)
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format("ddd, hA");                       // "Sun, 3PM"
moment().format("[Today is] dddd");               // "Today is Sunday"
moment('gibberish').format('YYYY MM DD');         // "Invalid date"

or with a variable

const date = "2021-01-05";
const formatted = moment(date).format();

In React how to convert UTC dateTime to more readable string inside the table

Component

Error

2 Answers2