Formatting dates and times

Problem

Displaying a raw date, like 10/12/2025, is ambiguous. A user in the US sees it as October 12, while a user in the UK sees it as December 10. Simply hard-coding a single format (e.g., 'Oct 12, 2025') creates an experience that feels unnatural or unreadable for users in different regions.

Solution

Use a dedicated formatting component from a library like react-intl. A component such as FormattedDate automatically reads the current language from its provider. It formats a Date object into a correct, human-readable string according to the user's language rules, handling order, separators, and month names.

Steps

1. Create a client component for a date

Since the react-intl components require an IntlProvider, they must be used within client components.

Create a new component, app/components/PostDetails.tsx, that will display a formatted date.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

This component accepts a Date object as a prop. It then uses FormattedDate to render it.

2. Pass formatting options

The FormattedDate component accepts options to control the output. In the example above:

• value is the Date object to format.
• dateStyle="long" requests a format like "December 10, 2025". Other options include "full", "medium", and "short".
• timeStyle="short" requests a format like "3:00 PM".

3. Use the component on a page

Now, you can use your new component on any page, such as your home page.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // This could come from a database or API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

A user visiting /en will see "Posted on: December 10, 2025 at 3:00 PM". A user visiting /es will see "Posted on: 10 de diciembre de 2025, 15:00".