Ultimate Guide: How to Format Date in React
Jasser Mark Arioste
Hello! In this tutorial, you'll learn how to format dates in React using a date formatting library dayjs. You'll also learn how to format dates without relying on these libraries and only using the browser's API.
Format Date in React Using dayjs
#
If you're ok with using a library, I highly recommend using dayjs. This is also the easiest way to format dates in React, javascript, and typescript. It has the smallest footprint (2kb min+gzipped) out of all the date formatting libraries in javascript and it's already written in typescript.
First, we'll have to install the package using the following commands:
# yarn
yarn add dayjs
# npm
npm i dayjsNow, we can use it like this:
import React from "react"; import dayjs from "dayjs"; const HomePage = () => { const date = new Date(2022, 2, 19, 15, 57, 25); // pass the date, and use the format function, specify a format. const shortDateFormat = dayjs(date).format("MM/DD/YYYY"); // 03/19/2022 const withTime24hourFormat = dayjs(date).format("MM/DD/YYYY HH:mm:ss A"); // 03/19/2022 15:57:25 PM" const withTime12HourFormat = dayjs(date).format("MM/DD/YYYY hh:mm:ss A"); // 03/19/2022 03:57:25 PM" return ( <div className="container"> <div className="grid place-content-center min-h-screen"> <div className="flex flex-col items-center gap-4"> <h1 className="text-4xl my-8">React Format Date Tutorial</h1> <p>Short date format: {shortDateFormat}</p> <p>format with Time (24-hour): {withTime24hourFormat}</p> <p>format with Time (12-hour): {withTime12HourFormat}</p> </div> </div> </div> ); }; export default HomePage;123456789101112131415161718192021222324
Here's the output:
Check the other formatting options in the documentation:
Format the Relative Time Using dayjs
#
Sometimes, we want to show the relative time output such as "2 days ago", "23 seconds ago", or "2 minutes ago". To do this in dayjs, we have to extend it using the RelativeTime plugin:
import dayjs from "dayjs"; // extend dayjs import relativeTime from "dayjs/plugin/relativeTime"; dayjs.extend(relativeTime); const ComponentA = () => { const date = new Date(2023, 2, 19, 15, 57, 25); const date1 = new Date(2022, 2, 19, 15, 57, 25); // pass the date can also be a string, and use the fromNow() function. const twoDaysAgo = dayjs(date).fromNow(); const aYearAgo = dayjs(date1).fromNow(); return ( <div className="p-4"> <p>Relative Time: {twoDaysAgo}</p> <p>Relative Time: {aYearAgo}</p> </div> ); }; export default ComponentA;1234567891011121314151617181920
Here's the output:
Check the other formatting options in the documentation:
Format Date Using Intl.DateTimeFormat API
#
If you don't like to add dependencies to your project, it's also possible to use the new Intl.DateTimeFormat API.
For example, for displaying a short date format like M/DD/YYYY, you can use the { dateStyle: "short" } option:
const ComponentB = () => { const date = new Date(2023, 2, 19, 15, 57, 25); const formatted = Intl.DateTimeFormat("en-US", { dateStyle: "short", }).format(date); // 3/19/2023 return <div>formatted: {formatted}</div>; }; export default ComponentB;12345678910
You can also specify which parts to format like year, or month by using its other options:
const ComponentB = () => { const date = new Date(2023, 2, 19, 15, 57, 25); const formatted = Intl.DateTimeFormat("en", { year: "numeric", month: "short", }).format(date); // Mar 2023 const formatted2 = Intl.DateTimeFormat("en", { year: "numeric", month: "long", }).format(date); // March 2023 const formatted3 = Intl.DateTimeFormat("en", { year: "numeric", day: "2-digit", month: "long", }).format(date); // March 19, 2023 return ( <div className="p-4"> <p>formatted: {formatted}</p> <p>formatted: {formatted2}</p> <p>formatted: {formatted3}</p> </div> ); }; export default ComponentB;1234567891011121314151617181920212223242526272829
Format Date Using toLocaleDateString
#
You can also use the toLocaleDateString method of the Date object in javascript which uses the Intl.DateTimeFormat API internally. It accepts the same arguments as the Intl.DateTimeFormat API, for example:
const ComponentB = () => { const date = new Date(2023, 2, 19, 15, 57, 25); const formatted = date.toLocaleDateString("en", { year: "numeric", month: "short", }); // Mar 2023 const formatted2 = date.toLocaleDateString("en", { year: "numeric", month: "long", }); // March 2023 const formatted3 = date.toLocaleDateString("en", { year: "numeric", day: "2-digit", month: "long", }); // March 19, 2023 return ( <div className="p-4"> <p>formatted: {formatted}</p> <p>formatted: {formatted2}</p> <p>formatted: {formatted3}</p> </div> ); }; export default ComponentB;12345678910111213141516171819202122232425262728
Conclusion #
You learned how to format dates in react using dayjs and the Intl.DateTimeFormat API.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.
Resources #
Credits: Image by Robert from Pixabay
