reactjs 在javascript中设置时间格式

fcg9iug3 于 2023-02-04 发布在 React

关注(0)|答案(1)|浏览(106)

我在将字符串格式设置为可在表中使用的日期时间时遇到了一些问题（必须采用time/datetime/nonstring格式才能正确排序）。字段名为avg_runtime。API调用返回如下内容：

{
"data": [
    {
        "id": "01",
        "avg_runtime": "0:05:12.026100",
        "avg_runtime_seconds": 312.0261,
        "file_name": "myFile1",

    },
    {
        "id": "02",
        "avg_runtime": "0:10:03.936321",
        "avg_runtime_seconds": 603.936321,
        "file_name": "myFile2"
    }
  ]
}

我在后端添加了第二个字段，它返回avg_runtime_seconds作为以秒为单位的小数，其中一个挑战是，在某些情况下，返回值是days，而不仅仅是hh：mm：ss，而是包括days，如下所示：9 days, 17:30:02.813297。这在排序为9 days，17：30：02.813297 sorts out of order with 11 days，2：43：52.300138 '时会出现问题（我使用Material UI DataGrid功能进行排序）。因此我需要将这些字符串转换为日期时间或一些非字符串值，以便正确排序。以下是我目前在API调用中格式化值的方式：

async function getData() {
    await axios
        .get(`https://myapi.com/${ runmode }/products`, {
        headers: {
            'Content-Type': 'application/json'
        }
        })
        .then((response) =>{
            var this_data = response.data.data;
            setData(
                this_data.map((x) => {
                    return {
                        id: parseInt(`${x.product_id}`),
                        file_name: `${x.file_name}`,
                        avg_runtime: `${x.avg_runtime}`,
                        avg_runtime_seconds: `${x.last_rundate}`   
                    }
                })
            );
            setValidationList(
                tthis_data.map((x) => x.product_id)
            )
            setLoadingData(false);
        });
}

我试过使用avg_runtime: new Date( ${x. avg_runtime} ).toDateString(),，但是返回Invalid Date。我如何将这个值格式化为可用的（并且可排序的）时间/日期时间格式？
更新：我可以按照下面的建议使用值获取器，但是它仍然不能正确排序，即使使用数字值。我发现了错误的来源。虽然avg_runtime_seconds的小数位数设置为6位，但排序似乎没有考虑到总的值。请查看9天、17小时、45分钟、与2小时21分钟相比。排序似乎是基于字符的位置，而不是考虑小数的位置。有什么可以帮助解决这个问题的吗？

reactjs

来源：https://stackoverflow.com/questions/75312772/formatting-time-in-javascript

1条答案

按热度按时间

nhhxz33t1#

这是一个很难解决的问题。我必须做的第一件事是得到一个字段，该字段包含排序时可以引用的数值。我将avg_runtime以秒为单位作为浮点数，但是@mui DataGrid似乎只适用于整数，所以我使用Math.ceil转换它们我还注意到最初使用值获取器的建议似乎仍然按数据网格中显示的值排序。我尝试了另一个使用GridRenderCellParams的建议。这个工作，我创建了一个沙箱来测试它。下面的代码是我使用的，但这里是sandbox，以更好地可视化的解决方案。* 注意-avg_runtime_sconds值已经改为整数以下，而不是使用Math.ceil。

import Box from "@mui/material/Box";
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "file_name",
    headerName: "File Name",
    width: 150,
    editable: true
  },
  {
    field: "avg_runtime",
    headerName: "Avg Runtime Orig",
    width: 150,
    editable: true
  },
  {
    field: "avg_runtime_seconds",
    headerName: "Avg Runtime Ref Secs",
    width: 150,
    editable: true,
    renderCell: (params: GridRenderCellParams) => (
      <div>{params.row.avg_runtime}</div>
    )
  }
];

const rows = [
  {
    id: "01",
    avg_runtime: "0:05:12.026100",
    avg_runtime_seconds: 312,
    file_name: "myFile1"
  },
  {
    id: "02",
    avg_runtime: "0:10:03.936321",
    avg_runtime_seconds: 603,
    file_name: "myFile2"
  },
  {
    id: "03",
    avg_runtime: "9 days, 17:45:04.823807",
    avg_runtime_seconds: 841670,
    file_name: "myFile3"
  },
  {
    id: "04",
    avg_runtime: "11 days, 3:01:15.710670",
    avg_runtime_seconds: 961275,
    file_name: "myFile4"
  }
];

export default function DataGridDemo() {
  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
        experimentalFeatures={{ newEditingApi: true }}
      />
    </Box>
  );
}

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs 在javascript中设置时间格式

1条答案

相关问题

热门标签

最新问答