كيفية تنسيق التواريخ بشكل قصير أو متوسط أو طويل أو كامل

مقدمة

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

توفر واجهة Intl.DateTimeFormat في جافا سكريبت أنماطاً مُعدة مسبقاً تجمع خيارات التنسيق الشائعة في خيارات بسيطة. بدلاً من تحديد أنك تريد شهراً رقمياً، ويوماً رقمياً، وسنة رقمية، يمكنك طلب dateStyle: "short". وبدلاً من تكوين عرض الساعة والدقيقة والثانية، يمكنك طلب timeStyle: "medium".

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

ما هما dateStyle و timeStyle

يتحكم خيار dateStyle في كيفية ظهور التواريخ. يؤثر على مكونات التاريخ التي يتم عرضها ومدى تفصيلها. يقبل الخيار أربع قيم: "short" و"medium" و"long" و"full".

يتحكم خيار timeStyle في كيفية ظهور الأوقات. يؤثر على مكونات الوقت التي يتم عرضها ومدى تفصيلها. يقبل الخيار نفس القيم الأربع: "short" و"medium" و"long" و"full".

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

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"

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

فهم مستويات الأنماط الأربعة

يمثل كل مستوى نمط توازنًا مختلفًا بين الإيجاز والتفصيل. الأنماط القصيرة تقلل المساحة عن طريق حذف المكونات واستخدام التنسيقات الرقمية. الأنماط الكاملة تعزز الوضوح من خلال تضمين جميع المكونات ذات الصلة وكتابة الكلمات بالكامل.

نمط "short" ينتج مخرجات مضغوطة مناسبة للمساحات الضيقة. عادة ما يستخدم تنسيقات رقمية ويحذف المعلومات التكميلية مثل أسماء أيام الأسبوع.

نمط "medium" يوفر تفاصيل معتدلة. غالبًا ما يتضمن أسماء الأشهر المختصرة ودقة متوازنة للوقت.

نمط "long" يضيف المزيد من السياق. عادة ما يكتب أسماء الأشهر بالكامل ويتضمن مكونات إضافية مثل معلومات المنطقة الزمنية.

نمط "full" ينتج التمثيل الأكثر اكتمالاً. يتضمن جميع المكونات ذات الصلة مثل أسماء أيام الأسبوع، وأسماء الأشهر الكاملة، وأسماء المناطق الزمنية الكاملة.

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

تنسيق التواريخ باستخدام dateStyle

يتحكم خيار dateStyle في تنسيق التاريخ. ينتج كل مستوى نمط مخرجات مختلفة لنفس التاريخ.

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

يستخدم النمط القصير قيمًا رقمية بالكامل، مما يجعله الأكثر إيجازًا. يختصر النمط المتوسط اسم الشهر. يكتب النمط الطويل اسم الشهر بالكامل. يضيف النمط الكامل اسم يوم الأسبوع للسياق الكامل.

تنسيق الأوقات باستخدام timeStyle

يتحكم خيار timeStyle في تنسيق الوقت. يعرض كل مستوى من مستويات النمط مكونات وقت مختلفة.

const date = new Date("2025-03-15T14:30:45");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "2:30 PM"

console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"

console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

يعرض النمط القصير الساعات والدقائق فقط. يضيف النمط المتوسط الثواني. يتضمن النمط الطويل المنطقة الزمنية المختصرة. يعرض النمط الكامل اسم المنطقة الزمنية بالكامل.

الجمع بين dateStyle و timeStyle

يمكنك استخدام كلا الخيارين معًا لتنسيق الطوابع الزمنية الكاملة. يطبق المنسق كلا النمطين بشكل مستقل.

const date = new Date("2025-03-15T14:30:45");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short"
});

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

يظهر التاريخ بتنسيق طويل بينما يستخدم الوقت تنسيقًا قصيرًا. توفر هذه المجموعة سياقًا تفصيليًا للتاريخ مع الحفاظ على إيجاز الوقت.

يمكنك مزج أي نمط تاريخ مع أي نمط وقت بناءً على احتياجاتك.

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

يؤدي استخدام مستويات النمط المتطابقة إلى تفاصيل متسقة عبر كل من التاريخ والوقت. يتيح لك مزج الأنماط التركيز على جانب واحد أكثر من الآخر.

كيف تختلف أنماط التاريخ عبر اللغات المحلية

تقوم كل لغة محلية بتنسيق التواريخ وفقًا لاتفاقياتها الخاصة. ينتج عن النمط نفسه مخرجات مختلفة للغات المحلية المختلفة، ولكن مستوى التفاصيل النسبي يظل متسقًا.

const date = new Date("2025-03-15T14:30:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

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

كيف تختلف أنماط الوقت عبر اللغات المحلية

يتكيف تنسيق الوقت أيضًا مع اتفاقيات اللغة المحلية. تستخدم بعض اللغات المحلية ساعات 12 ساعة مع مؤشرات صباحًا/مساءً، بينما يستخدم البعض الآخر ساعات 24 ساعة.

const date = new Date("2025-03-15T14:30:45");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

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

متى تستخدم النمط القصير

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

استخدم نمط الوقت القصير لعرض الأوقات في الجداول الزمنية والتقويمات أو في أي مكان لا تكون فيه الدقة بالثواني ضرورية. تحتاج معظم السياقات فقط إلى الساعات والدقائق.

متى تستخدم النمط المتوسط

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

استخدم نمط التاريخ المتوسط عندما يكون لديك مساحة معتدلة وتريد أن تكون التواريخ أكثر قابلية للقراءة من التنسيقات الرقمية البحتة. تساعد أسماء الأشهر المختصرة المستخدمين على تحديد الأشهر بشكل أسرع من الأرقام.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

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

متى تستخدم النمط الطويل

يوفر النمط الطويل تفاصيل إضافية دون أن يصبح مطولاً مثل النمط الكامل. فهو يعرض المعلومات بشكل كامل مع حذف المكونات التكميلية مثل أسماء أيام الأسبوع.

استخدم نمط التاريخ الطويل للتواريخ المهمة التي تستحق التأكيد أو عندما تريد أن تُقرأ التواريخ بشكل أكثر طبيعية. أسماء الأشهر المكتوبة بالكامل أسهل في المسح البصري من الاختصارات.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

استخدم نمط الوقت الطويل عندما تكون معلومات المنطقة الزمنية مهمة. هذا يساعد المستخدمين على فهم متى حدثت الأحداث أو ستحدث بالنسبة لمنطقتهم الزمنية.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

متى تستخدم النمط الكامل

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

استخدم نمط التاريخ الكامل لعرض التواريخ التي تحتاج إلى سياق أقصى. إضافة يوم الأسبوع يساعد المستخدمين على وضع التواريخ ضمن التقويم الأسبوعي، وهو مفيد للجدولة والتخطيط وفهم العلاقات الزمنية.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

يعمل النمط الكامل بشكل جيد لعرض الأحداث المهمة الفردية، ورسائل التأكيد، أو أي مكان يستفيد فيه المستخدمون من رؤية السياق الزمني الكامل.

فهم القيود

لا يمكن استخدام خيارات dateStyle وtimeStyle مع خيارات المكونات الفردية. يجب عليك الاختيار بين استخدام الإعدادات المسبقة للنمط أو تكوين المكونات بشكل فردي.

هذا لن يعمل:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // خطأ: لا يمكن الجمع
});

خيار dateStyle يحدد بالفعل تنسيق أيام الأسبوع. إضافة خيار صريح weekday يخلق تعارضًا. ينطبق نفس القيد على timeStyle مع خيارات المكونات مثل hour وminute أو second.

إذا كنت بحاجة إلى مزيد من التحكم في مكونات محددة، فاحذف خيارات النمط وقم بتكوين المكونات بشكل فردي.

const formatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date("2025-03-15")));
// الناتج: "Saturday, March 15, 2025"

يمكنك استخدام dateStyle وtimeStyle معًا لأنهما يتحكمان في جوانب مختلفة من التنسيق. يمكنك أيضًا دمجهما مع خيارات لا تتعارض، مثل timeZone وcalendar أو numberingSystem.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// الناتج: "March 15, 2025 at 2:30:45 PM EST"

تنسيق التواريخ وفقًا للغة المستخدم

استخدم تفضيلات لغة المتصفح لتنسيق التواريخ وفقًا لتوقعات كل مستخدم. توفر خاصية navigator.language اللغة المفضلة للمستخدم.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// يختلف الناتج حسب لغة المستخدم
// للغة en-US: "March 15, 2025 at 2:30 PM"
// للغة de-DE: "15. März 2025 um 14:30"
// للغة fr-FR: "15 mars 2025 à 14:30"

يمكنك أيضًا تمرير مصفوفة navigator.languages بالكامل لتمكين سلوك الرجوع. يستخدم المنسق أول لغة يدعمها من المصفوفة.

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  dateStyle: "medium"
});

إعادة استخدام المنسقات لتحسين الأداء

إنشاء نسخ من Intl.DateTimeFormat يتضمن معالجة بيانات اللغة والخيارات. عند تنسيق تواريخ متعددة بنفس الإعدادات، قم بإنشاء المنسق مرة واحدة وأعد استخدامه.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

يحسن هذا النمط الأداء عند تنسيق مصفوفات من التواريخ أو عرض العديد من الطوابع الزمنية في واجهة المستخدم.

ما يجب تذكره

توفر خيارات dateStyle وtimeStyle مستويات تنسيق معدة مسبقًا: "short" و"medium" و"long" و"full". يمثل كل مستوى توازنًا مختلفًا بين الإيجاز والتفاصيل، حيث يكون المستوى القصير هو الأكثر إيجازًا والكامل هو الأكثر اكتمالًا.

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

يمكنك استخدام dateStyle وtimeStyle معًا ولكن لا يمكن دمجهما مع خيارات المكونات الفردية مثل weekday أو hour. اختر بين أنماط الإعدادات المسبقة للبساطة أو المكونات الفردية للتحكم الدقيق.

قم بتنسيق التواريخ باستخدام لغة المستخدم من navigator.language لعرض التواريخ وفقًا لتوقعات كل مستخدم. أعد استخدام نسخ المنسق عند تنسيق تواريخ متعددة للحصول على أداء أفضل.