日期和时间的格式化

问题

直接显示原始日期（如 10/12/2025）会产生歧义。美国用户会将其视为 10 月 12 日，而英国用户则会理解为 12 月 10 日。仅仅硬编码一种格式（例如 '2025 年 10 月 12 日' 或 'Oct 12, 2025'）会让不同地区的用户感到不自然，甚至难以理解。

解决方案

使用专门的格式化组件，例如 react-intl 提供的组件。像 FormattedDate 这样的组件会自动从其 provider 读取当前语言，并根据用户的语言规则，将 Date 对象格式化为正确且易读的字符串，自动处理顺序、分隔符和月份名称。

步骤

1. 创建一个用于日期的客户端组件

由于 react-intl 组件需要 IntlProvider，因此必须在客户端组件中使用。

新建一个组件 app/components/PostDetails.tsx，用于显示格式化后的日期。

// 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>
  );
}

该组件接收一个 Date 对象作为 prop，然后通过 FormattedDate 进行渲染。

2. 传递格式化选项

FormattedDate 组件支持通过 options 控制输出格式。在上面的示例中：

• value 是要格式化的 Date 对象。
• dateStyle="long" 请求类似 "2025 年 12 月 10 日" 的格式。其他选项还包括 "full"、"medium" 和 "short"。
• timeStyle="short" 请求类似 "下午 3:00" 的时间格式。

3. 在页面中使用该组件

现在，您可以在任何页面（例如首页）使用您的新组件。

// 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>
  );
}

访问 /en 的用户将看到“发表于：2025 年 12 月 10 日 15:00”。访问 /es 的用户将看到“发表于：2025 年 12 月 10 日 15:00”。