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.