格式化日期和时间

问题

显示原始日期，例如 10/12/2025，可能会引起歧义。美国用户会将其视为 10 月 12 日，而英国用户会将其视为 12 月 10 日。简单地硬编码单一格式（例如 'Oct 12, 2025'）会让不同地区的用户感到不自然或难以理解。

解决方案

使用像 react-intl 这样的库中的专用格式化组件。像 FormattedDate 这样的组件会自动从其提供者读取当前语言。它会根据用户的语言规则，将 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>
      发布于：
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

此组件接受一个 Date 对象作为参数，然后使用 FormattedDate 进行渲染。

2. 传递格式化选项

FormattedDate 组件接受选项来控制输出。在上面的示例中：

• 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() {
  // 这可以来自数据库或 API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>我的博客文章</h1>
      <PostDetails publishDate={myPostDate} />
      <p>这是文章的内容...</p>
    </div>
  );
}

访问 /en 的用户将看到 "发布于：2025 年 12 月 10 日 下午 3:00"。访问 /es 的用户将看到 "发布于：2025 年 12 月 10 日 15:00"。