This is a simple utility function that I wrote for my Ecommerce Dashboard it takes the unformatted standard ISO 8601 date time string and formats it into a more readable format.
Something like this
So lets get started.
Create a new .js file calledgetDateHandler.js
export default function getDateHandler(date) {
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const newDate = new Date(date);
const getMonth = months[newDate.getMonth()];
let time;
if (newDate.getDate() === new Date().getDate()) {
time = `${newDate.getHours()}:${newDate.getMinutes()}`;
}
//What this does is if the current date matches the date entered it displays the time else it displays the date
const fomattedDate = time
? ` Today at ${time}`
: `${getMonth} ${newDate.getDate()}, ${newDate.getFullYear()}`;
return fomattedDate;
}
Using the above function is simple. Import it into wherever you need to use it. In my case within a order map function in react. wrap the function around the date that requires formatting. getDateHandler("2021-11-04T08:37:13.099+00:00")
Below you can see a demo of how it works.
import React from "react";
import getDateHandler from "../utils/getDateHandler";
export default function UsingDateFormatScreen(props) {
const createdAt="2021-11-04T08:37:13.099+00:00";
return (
<div>
<h1>Example Date : <br /> {getDateHandler(createdAt)} </h1>
</div>
);
}
Do let me know if you found this useful :)
Top comments (0)