The json data having date format of ISO 8601 format I want to change the format to dd/mm/yy

Question

import React, { useState } from "react"; import { MaterialReactTable } from "material-react-table"; import Fuse from "fuse.js"; import { Slider, TextField, IconButton, Drawer } from "@mui/material"; import { DatePicker } from "@mui/x-date-pickers"; import GroupingDropdown from "./GroupingDropDown"; import DateTimeFormatter from "./DateTimeFormatter"; import CategorySubcategoryFilter from "./CategorySubcategoryFilter"; import FilterListIcon from "@mui/icons-material/FilterList"; import SortIcon from "@mui/icons-material/Sort"; import GroupIcon from "@mui/icons-material/Group"; import SortingFilter from "./SortingFilter"; const DataTable = ({ data, columns }) => { const [columnVisibility, setColumnVisibility] = useState({}); const [globalFilter, setGlobalFilter] = useState(""); const [nameFilter, setNameFilter] = useState(""); const [categoryFilter, setCategoryFilter] = useState([]); const [subcategoryFilter, setSubcategoryFilter] = useState([]); const [priceRange, setPriceRange] = useState([0, 1000]); const [createdAtRange, setCreatedAtRange] = useState([null, null]); const [grouping, setGrouping] = useState([]); const [showFilterDrawer, setShowFilterDrawer] = useState(false); const [showSortingDrawer, setShowSortingDrawer] = useState(false); const [showGroupingDrawer, setShowGroupingDrawer] = useState(false); const [sortedData, setSortedData] = useState(data); const fuse = new Fuse(sortedData, { keys: ["name"], includeMatches: true, }); const handleSorting = (columnKey) => { const sorted = [...sortedData].sort((a, b) => { if (a[columnKey] < b[columnKey]) return -1; if (a[columnKey] > b[columnKey]) return 1; return 0; }); setSortedData(sorted); }; const filteredData = data.filter((item) => { return ( (fuse .search(globalFilter) .map((result) => result.item.name) .includes(item.name) || globalFilter === "") && (fuse .search(nameFilter) .map((result) => result.item.name) .includes(item.name) || nameFilter === "") && (categoryFilter.length === 0 || categoryFilter.includes(item.category)) && (subcategoryFilter.length === 0 || subcategoryFilter.includes(item.subcategory)) && item.price >= priceRange[0] && item.price <= priceRange[1] && (createdAtRange[0] === null || createdAtRange[1] === null || (new Date(item.createdAt) >= createdAtRange[0] && new Date(item.createdAt) <= createdAtRange[1])) ); }); const handleGroupingChange = (columnIds) => { setGrouping(columnIds); setShowGroupingDrawer(false); }; return ( <> <div style={{ display: "flex", alignItems: "flex-start", flexDirection: "row-reverse", padding: "10px", }} > <input value={globalFilter || ""} onChange={(e) => setGlobalFilter(e.target.value)} placeholder="Search..." style={{ marginRight: "10px", padding: "8px", border: "1px solid #ccc", borderRadius: "5px", fontSize: "14px", outline: "none", }} /> <input value={nameFilter || ""} onChange={(e) => setNameFilter(e.target.value)} placeholder="Filter by name..." style={{ marginRight: "10px", padding: "8px", border: "1px solid #ccc", borderRadius: "5px", fontSize: "14px", outline: "none", }} /> <IconButton onClick={() => setShowFilterDrawer(true)}> <FilterListIcon /> </IconButton> <IconButton onClick={() => setShowSortingDrawer(true)}> <SortIcon /> </IconButton> <IconButton onClick={() => setShowGroupingDrawer(true)}> <GroupIcon /> </IconButton> </div> <MaterialReactTable columns={columns} data={filteredData} columnVisibility={columnVisibility} onColumnVisibilityChange={setColumnVisibility} enableSorting globalFilter={globalFilter} enableGrouping grouping={grouping} renderCell={({ cell }) => { if ( cell.column.accessorKey === "createdAt" || cell.column.accessorKey === "updatedAt" ) { return <DateTimeFormatter value={cell.value} />; } return cell.renderedCellValue; }} // DateTimeFormatter.jsx import React from "react"; import dayjs from "dayjs"; const DateTimeFormatter = ({ value }) => { console.log("Original value:", value); // Debugging statement const dateTime = dayjs(value); console.log("Formatted date:", dateTime.format("DD/MM/YY")); // Debugging statement const formattedDateTime = dateTime.format("DD/MM/YY"); return <span>{formattedDateTime}</span>; }; export default DateTimeFormatter; //json.data { "id": 1, "name": "Nutrition Attachment", "category": "Health", "subcategory": "Nutrition", "createdAt": "2016-03-24T05:28:03.099+05:30", "updatedAt": "2016-03-24T05:28:03.099+05:30", "price": 24.99, "sale_price": 21.95 }, In my code json data having date format like different I want date format be like dd/mm/yycan anyone help for fix the issue In these stackoverflow shows error while question posting It looks like your post is mostly code; please add some more details.

In my code json data having date format like different I want date format be like dd/mm/yycan anyone help for fix the issue In these stackoverflow shows error while question posting It looks like your post is mostly code; please add some more details.

Answer 1

You have dates in ISO8601 format.

You can create a new Date object from any string in this format and then extract the different parts of the date to compose your preferred format

const date = new Date("2016-03-24T05:28:03.099+05:30");

const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // months in JS are indexed from 0
const year = date.getFullYear().toString().slice(-2); // 2 last digits

const formattedDate = `${day}/${month}/${year}`;

console.log(formattedDate ); // Result: "24/03/16"

I hope that it will help.