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

المشكلة

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

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

الحل

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

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

الخطوات

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

استخدم خطاف 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>Published: {shortDate}</p>
      <p>Full date: {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>Order placed on</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>
        Scheduled for:{" "}
        {intl.formatDate(scheduledAt, {
          year: "numeric",
          month: "short",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
        })}
      </p>
    </div>
  );
}

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