كيفية التبديل بين تنسيق الوقت 12 ساعة و24 ساعة

مقدمة

يظهر الوقت بشكل مختلف حول العالم. يرى الأمريكيون عادةً 2:30 PM، بينما يرى الألمان 14:30، وكلاهما يمثل نفس اللحظة. عندما تعرض الأوقات بتنسيق واحد فقط، فإنك تفترض أن جميع المستخدمين يتبعون نفس الاصطلاح.

يؤدي عرض الأوقات بتنسيق غير مألوف إلى خلق احتكاك. يجب على المستخدم الذي يتوقع 14:30 ولكنه يرى 2:30 PM أن يحول الوقت ذهنيًا. يواجه المستخدم الذي يتوقع 2:30 PM ولكنه يرى 14:30 نفس المشكلة. يتكرر هذا العبء المعرفي مع كل وقت يُعرض في تطبيقك.

توفر JavaScript واجهة برمجة التطبيقات Intl.DateTimeFormat للتعامل مع تنسيق الوقت تلقائيًا. يشرح هذا الدرس سبب اختلاف تنسيقات الوقت، وكيف تتحكم واجهة برمجة التطبيقات في عرض 12 ساعة مقابل 24 ساعة، ومتى يجب تجاوز الإعدادات الافتراضية للغة.

لماذا تختلف تنسيقات الوقت حسب اللغة

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

في الولايات المتحدة وكندا وأستراليا والفلبين، يعتبر تنسيق 12 ساعة مع مؤشرات AM/PM هو المعيار. تظهر ساعة بعد الظهر كـ 2:30 PM.

في معظم أوروبا وأمريكا اللاتينية وآسيا، يعتبر تنسيق 24 ساعة هو المعيار. يظهر نفس الوقت كـ 14:30 دون الحاجة إلى مؤشر AM/PM.

تستخدم بعض المناطق كلا التنسيقين حسب السياق. تستخدم المملكة المتحدة تنسيق 24 ساعة لجداول النقل ولكن تنسيق 12 ساعة للمحادثة اليومية.

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

ما تعنيه تنسيقات 12 ساعة و24 ساعة

يقسم تنسيق 12 ساعة اليوم إلى فترتين مدة كل منهما 12 ساعة. تمتد الساعات من 12 إلى 11، ثم تبدأ من جديد. يستخدم النظام AM (ante meridiem) من منتصف الليل إلى الظهر وPM (post meridiem) من الظهر إلى منتصف الليل. يبدأ منتصف الليل عند 12:00 AM ويحدث الظهر عند 12:00 PM.

12:00 AM → midnight
1:00 AM → 1 hour after midnight
11:59 AM → 1 minute before noon
12:00 PM → noon
1:00 PM → 1 hour after noon
11:59 PM → 1 minute before midnight

يعد تنسيق 24 ساعة الساعات بشكل متواصل من 0 إلى 23. يبدأ منتصف الليل عند 00:00 وينتهي اليوم عند 23:59. لا حاجة لمؤشر AM/PM لأن كل ساعة لها رقم فريد.

00:00 → midnight
01:00 → 1 hour after midnight
11:59 → 1 minute before noon
12:00 → noon
13:00 → 1 hour after noon
23:59 → 1 minute before midnight

تستخدم اللغات المختلفة تنسيقات مختلفة افتراضياً. تحترم واجهة Intl.DateTimeFormat هذه الإعدادات الافتراضية لكنها تسمح لك بتجاوزها عند الحاجة.

استخدام خيار hour12 للتحكم في تنسيق الوقت

يتحكم خيار hour12 في استخدام تنسيق 12 ساعة من عدمه. اضبطه على true لتنسيق 12 ساعة مع AM/PM، أو false لتنسيق 24 ساعة.

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

const format12 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});

const format24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

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

console.log(format24.format(date));
// Output: "14:30"

يتجاوز خيار hour12 السلوك الافتراضي للغة. على الرغم من أن الإنجليزية الأمريكية تستخدم عادةً تنسيق 12 ساعة، فإن ضبط hour12: false يفرض تنسيق 24 ساعة.

يجب تضمين إما hour في الخيارات أو استخدام timeStyle لكي يصبح خيار hour12 فعالاً. بدون مكون وقت في المخرجات، لا يكون للخيار أي تأثير.

استخدام خيار hourCycle للتحكم الدقيق

يوفر خيار hourCycle تحكماً أكبر من hour12 من خلال تحديد كيفية عد الساعات بالضبط. يقبل أربع قيم: "h11"، "h12"، "h23"، و"h24".

const date = new Date('2025-03-15T00:30:00'); // 12:30 AM

const h11 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h11'
});

const h12 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12'
});

const h23 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h23'
});

const h24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h24'
});

console.log(h11.format(date));
// Output: "0:30 AM"

console.log(h12.format(date));
// Output: "12:30 AM"

console.log(h23.format(date));
// Output: "00:30"

console.log(h24.format(date));
// Output: "24:30"

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

فهم قيم hourCycle الأربع

تحدد قيم hourCycle الأربع كيفية ترقيم الساعات ضمن كل فترة.

تستخدم قيمة "h12" تنسيق 12 ساعة مع ساعات من 1 إلى 12. يظهر منتصف الليل كـ 12:00 AM وتظهر الظهيرة كـ 12:00 PM. هذا هو تنسيق 12 ساعة القياسي المستخدم في الولايات المتحدة.

تستخدم قيمة "h11" تنسيق 12 ساعة مع ساعات من 0 إلى 11. يظهر منتصف الليل كـ 0:00 AM وتظهر الظهيرة كـ 0:00 PM. هذا التنسيق أقل شيوعاً لكنه يظهر في بعض السياقات.

تستخدم قيمة "h23" تنسيق 24 ساعة مع ساعات من 0 إلى 23. يظهر منتصف الليل كـ 00:00 وينتهي اليوم عند 23:59. هذا هو تنسيق 24 ساعة القياسي المستخدم في معظم أوروبا وآسيا.

تستخدم قيمة "h24" تنسيق 24 ساعة مع ساعات من 1 إلى 24. يظهر منتصف الليل كـ 24:00 من منظور اليوم السابق. هذا التنسيق نادر لكنه يظهر في بعض السياقات التقنية.

تستخدم معظم التطبيقات إما "h12" لتنسيق 12 ساعة أو "h23" لتنسيق 24 ساعة.

مقارنة الساعات عند منتصف الليل عبر دورات الساعة

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

const midnight = new Date('2025-03-15T00:00:00');

const cycles = ['h11', 'h12', 'h23', 'h24'];

cycles.forEach(cycle => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hourCycle: cycle
  });

  console.log(`${cycle}: ${formatter.format(midnight)}`);
});

// Output:
// h11: 0:00:00 AM
// h12: 12:00:00 AM
// h23: 00:00:00
// h24: 24:00:00

تنتج قيمتا h12 وh23 التمثيلات الأكثر شيوعاً لتنسيقاتهما المعنية.

مقارنة الساعات عند الظهيرة عبر دورات الساعة

توضح الظهيرة أيضاً كيف تختلف دورات الساعة.

const noon = new Date('2025-03-15T12:00:00');

const cycles = ['h11', 'h12', 'h23', 'h24'];

cycles.forEach(cycle => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hourCycle: cycle
  });

  console.log(`${cycle}: ${formatter.format(noon)}`);
});

// Output:
// h11: 0:00:00 PM
// h12: 12:00:00 PM
// h23: 12:00:00
// h24: 12:00:00

مرة أخرى، ينتج h12 وh23 تمثيلات قياسية بينما يستخدم h11 الرقم 0 لساعة الظهر.

كيف يتفاعل hour12 و hourCycle

عند تحديد كل من hour12 وhourCycle، يأخذ خيار hour12 الأولوية ويتم تجاهل خيار hourCycle.

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

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
  hourCycle: 'h23'  // This is ignored
});

console.log(formatter.format(date));
// Output: "2:30 PM" (12-hour format from hour12: true)

يفرض إعداد hour12: true تنسيق 12 ساعة، متجاوزاً إعداد hourCycle: 'h23' الذي عادةً ما ينتج تنسيق 24 ساعة.

عملياً، استخدم إما hour12 للتحكم البسيط أو hourCycle للتحكم الدقيق، ولكن ليس كليهما معاً.

احترام الإعدادات الافتراضية للغة

عند حذف كل من hour12 وhourCycle، يستخدم المنسق تنسيق الوقت الافتراضي للغة المحلية.

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

const usFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

const deFormatter = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric'
});

const jpFormatter = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: 'numeric'
});

console.log(usFormatter.format(date));
// Output: "2:30 PM" (US default: 12-hour)

console.log(deFormatter.format(date));
// Output: "14:30" (German default: 24-hour)

console.log(jpFormatter.format(date));
// Output: "14:30" (Japanese default: 24-hour)

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

تجاوز الإعدادات الافتراضية للغة

يمكنك تجاوز تنسيق الوقت الافتراضي للغة المحلية عن طريق ضبط hour12 أو hourCycle بشكل صريح.

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

// Force German locale to use 12-hour format
const de12 = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});

// Force US locale to use 24-hour format
const us24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

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

console.log(us24.format(date));
// Output: "14:30"

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

متى يجب احترام الإعدادات الافتراضية للغة

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

دع المنسق يستخدم تنسيق الوقت الافتراضي للغة المحلية عند عرض الأوقات للمستخدمين في منطقتهم الخاصة.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric'
});

const time = new Date('2025-03-15T14:30:00');
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For ja-JP: "14:30"

يتكيف هذا النهج تلقائياً مع توقعات كل مستخدم دون الحاجة إلى تكوين.

متى يجب تجاوز الإعدادات الافتراضية للغة

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

// Always use 24-hour format for flight times
const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Departure: ${formatter.format(departureTime)}`);
// Output: "Departure: 14:30" (for all locales)

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

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

function formatTime(date, userPrefers24Hour) {
  const formatter = new Intl.DateTimeFormat(navigator.language, {
    hour: 'numeric',
    minute: 'numeric',
    hour12: !userPrefers24Hour
  });

  return formatter.format(date);
}

const time = new Date('2025-03-15T14:30:00');

console.log(formatTime(time, false));
// Output: "2:30 PM"

console.log(formatTime(time, true));
// Output: "14:30"

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

استخدام hour12 مع timeStyle

يعمل خيار hour12 مع أنماط timeStyle المحددة مسبقًا. يتيح لك هذا التحكم في تنسيق الوقت مع الاستمرار في استخدام الأنماط المحددة مسبقًا المريحة.

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

const short12 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  hour12: true
});

const short24 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  hour12: false
});

const medium12 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'medium',
  hour12: true
});

const medium24 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'medium',
  hour12: false
});

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

console.log(short24.format(date));
// Output: "14:30"

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

console.log(medium24.format(date));
// Output: "14:30:45"

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

تنسيق الأوقات للغات متعددة

عندما يخدم تطبيقك مستخدمين في مناطق متعددة، قم بتنسيق الأوقات وفقًا لاتفاقيات كل لغة.

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

const locales = [
  { code: 'en-US', name: 'United States' },
  { code: 'en-GB', name: 'United Kingdom' },
  { code: 'de-DE', name: 'Germany' },
  { code: 'ja-JP', name: 'Japan' }
];

locales.forEach(locale => {
  const formatter = new Intl.DateTimeFormat(locale.code, {
    hour: 'numeric',
    minute: 'numeric'
  });

  console.log(`${locale.name}: ${formatter.format(date)}`);
});

// Output:
// United States: 2:30 PM
// United Kingdom: 14:30
// Germany: 14:30
// Japan: 14:30

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

التحقق من دورة الساعة المحددة

يمكنك التحقق من دورة الساعة التي يستخدمها المنسق فعليًا عن طريق استدعاء resolvedOptions().

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

const options = formatter.resolvedOptions();
console.log(options.hourCycle);
// Output: "h12"

console.log(options.hour12);
// Output: true

تُرجع هذه الطريقة الإعدادات الفعلية التي يستخدمها المنسق بعد حل جميع الإعدادات الافتراضية للغة والخيارات الصريحة. يتضمن الكائن المُرجع كلاً من خصائص hourCycle وhour12 عند وجود مكونات الوقت.

تنسيق الأوقات في القوالب

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric'
});

const meetingTime = new Date('2025-03-15T14:30:00');
const deadlineTime = new Date('2025-03-15T17:00:00');

document.getElementById('meeting').textContent = formatter.format(meetingTime);
document.getElementById('deadline').textContent = formatter.format(deadlineTime);

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

ما يجب تذكره

استخدم خيار hour12 للتبديل بين تنسيق 12 ساعة و24 ساعة. اضبطه على true لتنسيق 12 ساعة مع AM/PM أو false لتنسيق 24 ساعة.

استخدم خيار hourCycle للتحكم الدقيق في ترقيم الساعات. توفر قيمة "h12" تنسيق 12 ساعة القياسي وتوفر "h23" تنسيق 24 ساعة القياسي.

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

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