كيفية تنسيق التواريخ للغات المحلية المختلفة في TanStack Start v1

المشكلة

لا يوجد تنسيق عرض موحد للتواريخ. فالتسلسل 10/12/2025 يعني 12 أكتوبر في الولايات المتحدة ولكنه يعني 10 ديسمبر في المملكة المتحدة. كتابة "Oct 12, 2025" تفترض استخدام أسماء الأشهر باللغة الإنجليزية واتفاقية ترتيب محددة. كل منطقة لديها توقعاتها الخاصة لتنسيق التاريخ، بما في ذلك ترتيب اليوم والشهر والسنة، واختيار الفواصل، وما إذا كانت أسماء الأشهر مكتوبة بالكامل أو مختصرة. عندما يعرض التطبيق التواريخ بتنسيق ثابت واحد، فإنه يبدو غريباً ومربكاً للمستخدمين في معظم المناطق.

يتوقع المستخدمون ظهور التواريخ بالتنسيق الذي تعلموه ويستخدمونه يومياً. التاريخ الذي يبدو طبيعياً لجمهور معين قد يكون غامضاً أو مزعجاً لجمهور آخر. بدون تنسيق مراعٍ للغة المحلية، تصبح التواريخ مصدراً للاحتكاك الذي يقوض تجربة المستخدم ويجعل التطبيق يبدو أقل احترافية.

الحل

تنسيق التواريخ بناءً على اللغة المحلية للمستخدم من خلال تحويل قيم التاريخ إلى سلاسل نصية تتبع الاتفاقيات الإقليمية للترتيب والفواصل وأسماء الأشهر. توفر مكتبة React-intl وظائف ومكونات تنسيق تستخدم واجهات برمجة التطبيقات المدمجة في المتصفح للتدويل لتطبيق القواعد الصحيحة لكل لغة محلية تلقائياً. من خلال تمرير قيمة التاريخ وخيارات التنسيق الاختيارية إلى هذه الأدوات، ينتج التطبيق مخرجات واضحة وطبيعية للغة ومنطقة المستخدم.

يضمن هذا النهج عرض التواريخ بشكل صحيح دون الحاجة إلى تنفيذ منطق التنسيق يدوياً لكل لغة محلية. يتكيف التنسيق مع اللغة المحلية للمستخدم، مما يجعل التواريخ قابلة للتعرف عليها فوراً ويقلل من العبء المعرفي.

الخطوات

1. إنشاء مكون يقوم بتنسيق التواريخ باستخدام useIntl hook

استخدم الـ hook المسمى useIntl للوصول إلى طريقة formatDate، والتي تحول قيمة التاريخ إلى سلسلة نصية متوافقة مع اللغة المحلية.

import { useIntl } from "react-intl";

export function EventDate({ date }: { date: Date }) {
  const intl = useIntl();

  return (
    <time dateTime={date.toISOString()}>
      {intl.formatDate(date, {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}
    </time>
  );
}

تطبق طريقة formatDate اصطلاحات اللغة المحلية لعرض التاريخ. يتحكم كائن الخيارات في أجزاء التاريخ التي تظهر ومستوى تفاصيلها. تتكيف السلسلة النصية المنسقة مع اللغة المحلية التي يوفرها IntlProvider في مستوى أعلى من شجرة المكونات.

2. تنسيق التواريخ بأنماط محددة باستخدام خيارات معدة مسبقًا

قم بتمرير مجموعات خيارات مختلفة للتحكم في نمط تنسيق التاريخ، مثل التواريخ الرقمية القصيرة أو التواريخ الوصفية الطويلة.

import { useIntl } from "react-intl";

export function ArticleMetadata({ publishedAt }: { publishedAt: Date }) {
  const intl = useIntl();

  const shortDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });

  const longDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });

  return (
    <div>
      <p>تم النشر: {shortDate}</p>
      <p>التاريخ الكامل: {longDate}</p>
    </div>
  );
}

يقبل خيار month قيمًا مثل numeric و2-digit وshort وlong وnarrow. يضيف خيار weekday يوم الأسبوع. تفسر كل لغة محلية هذه الخيارات وفقًا لاصطلاحاتها الخاصة، مما يضمن أن يتطابق الإخراج مع توقعات المستخدم.

3. استخدام مكون FormattedDate للتنسيق التصريحي

قم بعرض التواريخ بشكل تصريحي باستخدام مكون FormattedDate، الذي يقبل نفس خيارات التنسيق مثل طريقة formatDate.

import { FormattedDate } from "react-intl";

export function OrderSummary({ orderDate }: { orderDate: Date }) {
  return (
    <div>
      <h2>تم تقديم الطلب في</h2>
      <FormattedDate
        value={orderDate}
        year="numeric"
        month="long"
        day="numeric"
      />
    </div>
  );
}

يقوم مكون FormattedDate بعرض التاريخ المنسق كجزء من React بشكل افتراضي. يستخدم اللغة المحلية من سياق IntlProvider ويطبق نفس قواعد التنسيق مثل واجهة البرمجة الإجرائية. يعمل هذا النهج بشكل جيد عندما يكون التاريخ المنسق هو المحتوى الوحيد المطلوب في ذلك الجزء من شجرة المكونات.

4. تنسيق التواريخ مع معلومات الوقت

قم بتضمين مكونات الوقت عن طريق إضافة خيارات الساعة والدقيقة لعرض كل من التاريخ والوقت في سلسلة منسقة واحدة.

import { useIntl } from "react-intl";

export function AppointmentCard({ scheduledAt }: { scheduledAt: Date }) {
  const intl = useIntl();

  return (
    <div>
      <p>
        مجدول في:{" "}
        {intl.formatDate(scheduledAt, {
          year: "numeric",
          month: "short",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
        })}
      </p>
    </div>
  );
}

إضافة خيارات hour وminute تنتج سلسلة تجمع بين التاريخ والوقت. تحدد اللغة المحلية ما إذا كان سيتم استخدام تنسيق الوقت بنظام 12 ساعة أو 24 ساعة وكيفية فصل أجزاء التاريخ والوقت. هذا يحافظ على التنسيق متسقًا مع التوقعات الإقليمية لعرض الطوابع الزمنية.