كيف أعرض أجزاء محددة فقط من التاريخ؟

استخدم خيارات Intl.DateTimeFormat لعرض مكونات التاريخ الفردية مثل السنة والشهر واليوم ويوم الأسبوع

مقدمة

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

توفر Intl.DateTimeFormat في JavaScript خيارات فردية لكل مكون من مكونات التاريخ. بدلاً من اختيار نمط محدد مسبقًا مثل "full" أو "short"، يمكنك تحديد الأجزاء التي تريد تضمينها بالضبط وكيفية تنسيق كل منها.

فهم مكونات التاريخ

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

يعرض weekday يوم الأسبوع. يعرض year السنة. يعرض month شهر السنة. يعرض day يوم الشهر.

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

تنسيق يوم الأسبوع

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

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

تنتج قيمة narrow حرفًا واحدًا. تنتج قيمة short اسمًا مختصرًا. تنتج قيمة long اسم يوم الأسبوع الكامل.

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

تنسيق السنة

يعرض الخيار year السنة. يقبل قيمتين.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"

تعرض القيمة numeric السنة كاملة. تعرض القيمة 2-digit آخر رقمين فقط.

تنسيق الشهر

يعرض الخيار month شهر السنة. يقبل خمس قيم توفر مستويات مختلفة من التفاصيل.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

تعرض القيمة numeric الشهر كرقم بدون أصفار بادئة. تعرض القيمة 2-digit الشهر كرقم مع أصفار بادئة. تنتج القيمة narrow حرفاً واحداً. تنتج القيمة short اسم شهر مختصراً. تنتج القيمة long اسم الشهر كاملاً.

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

تنسيق اليوم

يعرض الخيار day يوم الشهر. يقبل قيمتين.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"

تعرض القيمة numeric اليوم بدون أصفار بادئة. تعرض القيمة 2-digit اليوم مع أصفار بادئة.

بالنسبة للأيام ذات الرقم الواحد، تنتج numeric قيماً مثل "5" بينما تنتج 2-digit "05".

دمج أجزاء تاريخ متعددة

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

const date = new Date('2024-10-15');

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

يرتب المنسق المكونات تلقائياً وفقاً لاصطلاحات اللغة. لا تحتاج إلى القلق بشأن الترتيب أو علامات الترقيم.

كيفية عمل الخيارات عبر اللغات المختلفة

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

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

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

تتغير أسماء أيام الأسبوع والأشهر أيضاً بناءً على اللغة.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

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

حالات الاستخدام الشائعة

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

const date = new Date('2024-10-15');

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

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

يعمل عرض أسماء أيام الأسبوع بشكل جيد للتقاويم والجداول الزمنية.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

يعمل عرض الشهر واليوم بدون السنة بشكل جيد لأعياد الميلاد والمناسبات السنوية.

const date = new Date('2024-10-15');

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

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

الخلاصة

يتيح لك كائن الخيارات Intl.DateTimeFormat عرض أجزاء محددة من التاريخ بدلاً من التاريخ الكامل. يقبل خيار weekday القيم narrow أو short أو long. يقبل خيار year القيم numeric أو 2-digit. يقبل خيار month القيم numeric أو 2-digit أو narrow أو short أو long. يقبل خيار day القيم numeric أو 2-digit.

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