简体   繁体   English

在 React 中如何将 UTC dateTime 转换为表内更易读的字符串

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

I have react component which showing records in the table.我有反应组件,它显示表中的记录。 I have use 'useMemo' to define table structure and data.我已经使用“useMemo”来定义表结构和数据。 Some of its fields are date format which showing date like '2020-12-08T07:00:00Z'.它的一些字段是日期格式,显示日期如“2020-12-08T07:00:00Z”。 I want to convert it to more friendly reading ie DD:MM:YYYY:Time?我想将其转换为更友好的阅读方式,即 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我在 useMemo 中尝试过以下代码:[... 但它抛出异常

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

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结果将是: 08/12/2020 04:00:00

Source (Here there are all the country codes): https://www.w3schools.com/jsref/jsref_tolocalestring.asp来源(这里有所有国家代码): https://www.w3schools.com/jsref/jsref_tolocalestring.asp

If you want to output a variable with a string containing a date with momentjs you could go with moment(date).format(string).如果你想 output 一个变量,其字符串包含一个带有 momentjs 的日期,你可以 go 和 moment(date).format(string)。 Please refer to the momentjs docs请参考momentjs 文档

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(); 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 你怎么能重构并使反应变得不那么笨重和可读性? - How can you refactor and make react less bulky and more readable? 如何在javascript中将时间字符串转换为UTC时间字符串格式 - How to convert a time string into UTC time string format in javascript 如何将 UTC 日期转换为 react-datepicker 的“MM/DD/YYYY”? - How to convert a UTC date to “MM/DD/YYYY” for react-datepicker? 如何将 UTC 日期/时间转换为 MDT 和军用时间以进行反应应用? - how to convert UTC date/time into MDT and military time for react application? 在 React 中将 ISO 日期时间格式转换为可读格式 - Converting ISO datetime format to readable format in React 我们应该如何将字符串数据转换为数组并显示到反应表中 - how should we convert string data into array and display into react table 使 state 更新在 React 中更具可读性 - Making state updates more readable in React 如何将 Luxon DateTime 格式转换为字符串或数字? - How to convert Luxon DateTime format into string or numbers? 如何在我的react组件中重构此ASYNC调用以使其更具可读性? - How can I refactor this ASYNC call in my react component to make it more readable? 如何以更易读的方式显示从后端接收到的数据?我将 react 用于前端 - How can I display the data recieved from the backend in a more readable way?I use react for the Frontend
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM