ReactHustle

Ultimate Guide: How to Format Date in React

Jasser Mark Arioste

Jasser Mark Arioste

Ultimate Guide: How to Format Date in React

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 dayjs

Now, 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:

React Format Date using Dayjs

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:

React Format Date relative time

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

Share this post!

Related Posts

Disclaimer

This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle