تنسيق التواريخ والأوقات

المشكلة

عرض تاريخ خام، مثل 10/12/2025، يكون غامضاً. يراه المستخدم في الولايات المتحدة على أنه 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>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

يقبل هذا المكون كائن Date كخاصية. ثم يستخدم FormattedDate لعرضه.

2. تمرير خيارات التنسيق

يقبل مكون FormattedDate خيارات للتحكم في الإخراج. في المثال أعلاه:

• value هو كائن Date المراد تنسيقه.
• dateStyle="long" يطلب تنسيقاً مثل "10 ديسمبر 2025". تشمل الخيارات الأخرى "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 "Posted on: December 10, 2025 at 3:00 PM". وسيرى المستخدم الذي يزور /es "Posted on: 10 de diciembre de 2025, 15:00".