منتقي التاريخ

ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.

حقل لتاريخ قريب من اليوم (تاريخ استحقاق، موعد)، يُكتب أو يُختار من تقويم. وبخلاف عنصر المتصفح <input type="date">، الذي يتبع تقويمه وصيغته لغة المتصفح لا لغة الصفحة، فهو بلغة الصفحة: في العربية بأسماء الأشهر والأيام العربية، وأسبوع يبدأ يوم السبت، والأرقام التي اختارها الشخص، وشبكة تبدأ من اليمين. أما التاريخ الذي يعرفه الناس مسبقًا (تاريخ ميلاد)، فاستخدم له حقل التاريخ.

CSS: css/components/date-picker.css. JS: js/datepicker.js. الأصناف: .al-date-picker، .al-date-picker__toggle، ومما يرسمه المساعد: __dialog، __head، __title، __prev، __next، __grid.

في صفحته، بالإنجليزية والعربية

البنية

HTML

<div class="al-field">
  <label class="al-label" for="due">Due date</label>
  <span class="al-hint" id="due-hint">For example, <span data-al-date-example="2026-11-30">30/11/2026</span></span>
  <div class="al-date-picker">
    <input class="al-input" id="due" name="due" value="2026-11-30" aria-describedby="due-hint" data-al-date-picker>
    <button type="button" class="al-button al-button--icon al-date-picker__toggle" aria-label="Choose date">
      <svg class="al-icon" aria-hidden="true"><use href="/dist/icons.svg#al-icon-calendar"></use></svg>
    </button>
  </div>
</div>

JavaScript

import { initDatePickers } from "./js/datepicker.js";
const [due] = initDatePickers(document, {
  numerals: () => settings.digits,                      // "latn" or "arab"
  labels: { previous: "Previous month", next: "Next month" },
});
due.value;        // "2026-11-30"
due.refresh();    // after the language or digits change

• القيمة تاريخ بصيغة ISO (2026-11-30)، في حقل مخفي يأخذ name الخاص بحقل الإدخال، فيُرسل النموذج القيمة نفسها مهما كانت اللغة. ويعرضها حقل الإدخال كما تُكتب: «30/11/2026»، «٣٠/١١/٢٠٢٦».
• مثال التلميح (data-al-date-example) يُكتب بالطريقة التي يكتب بها الحقل التواريخ، وبالأرقام نفسها.
• التقويم عنصر <dialog> مشروط يوضع تحت الحقل: عنوانه الشهر والسنة، مع زرّي الشهر السابق والتالي، وشبكة من الأيام.
• الحدود: data-min وdata-max (بصيغة ISO) على حقل الإدخال. ولا يمكن اختيار الأيام خارجها.

الأنواع والأحجام

نوع واحد. والحقل بعرض 16rem على الأكثر: فالتاريخ قصير.

الحالات

• اليوم المختار: معبّأ بلون التمييز. اليوم الحالي: حلقة ووزن شبه عريض، كي لا يبدو مختارًا. خارج النطاق: باهت ومشطوب، aria-disabled="true".
• غير الصالح: ما كُتب ليس تاريخًا (أو 31 أبريل): القيمة فارغة، وخطأ الحقل يأتي من التحقق (js/validate.js)، ويقول أي جزء خاطئ.

لوحة المفاتيح

في الحقل: اكتب التاريخ، اليوم أولًا، بأي من مجموعتي الأرقام (30/11/2026، ٣٠/١١/٢٠٢٦، 30-11-26). ومفتاحا Alt+↓ يفتحان التقويم، كما يفتحان قائمة الاختيار.

في التقويم (نمط مربع حوار منتقي التاريخ في APG):

المفتاح	يفعل
← →	اليوم السابق أو التالي، باتجاه القراءة (في الكتابة من اليمين إلى اليسار، ← هو اليوم التالي)
↑ ↓	اليوم نفسه قبل أسبوع أو بعده
Home، End	أول يوم في الأسبوع وآخره، كما يجري أسبوع اللغة
Page Up، Page Down	اليوم نفسه قبل شهر أو بعده (أو آخر أيام الشهر)
Shift + Page Up، Page Down	قبل سنة أو بعدها
Enter، المسافة	يختار اليوم، ويُغلق، ويعيد التركيز إلى الزر
Escape	يُغلق دون تغيير شيء؛ ويعود التركيز إلى الزر
Tab	بين زرّي الشهر والشبكة؛ والشبكة محطة Tab واحدة

والنقر خارجه يُغلقه. ولا شيء ينتقل تلقائيًا أثناء الكتابة.

ARIA

• التقويم عنصر <dialog> يُفتح بالدالة showModal()، ويُسمّيه عنوان الشهر. والعنوان aria-live="polite"، فيُعلَن الشهر الجديد.
• الشبكة role="grid"، ويُسمّيها العنوان. وعناوين الأعمدة أسماء أيام الأسبوع كاملة (تُعرض مختصرة، أو بحرف واحد حيث تطول الأسماء المختصرة، كما في العربية). وكل يوم خلية شبكة يُسمّيها تاريخها الكامل («الاثنين، 30 نوفمبر 2026»)، مع aria-selected، وaria-current="date" على اليوم الحالي.
• لزر فتح التقويم وزرّي الشهر أسماء بلغة الصفحة (aria-label؛ وأسماء زرّي الشهر من الخيار labels).

من اليمين إلى اليسار

• يُرسم التقويم بلغة الحقل (أقرب lang إليه)، ويأخذ تلك lang واتجاهها: في العربية، يقع أول أيام الأسبوع (السبت، من بيانات اللغة في المتصفح) على اليمين.
• التقويم الميلادي، بأسماء الأشهر العربية التي في المتصفح (نوفمبر)، حتى حيث يكون التقويم الافتراضي للغة غيره (ar-SA).
• الأرقام: الغربية افتراضيًا، والهندية العربية حين يطلب ذلك الخيار numerals. وتُقرأ التواريخ المكتوبة بأيٍّ منهما، وبالأرقام الفارسية.
• يشير زرّا الشهر إلى جهة القراءة: «السابق» يشير إلى اليمين في العربية.
• التاريخ المكتوب بالعربية يُقرأ من اليمين إلى اليسار: اليوم، فالشهر، فالسنة، واليوم على اليمين. وعلامات الاتجاه التي يضعها المتصفح تحفظ ذلك؛ ويتجاهلها التحليل.

افعل ولا تفعل

افعل

• استخدمه للتواريخ القريبة من اليوم، حيث يفيد التقويم.
• ضع مثالًا في التلميح، مع data-al-date-example، كي يُكتب كما يكتب الحقل التواريخ.
• تحقّق عند الإرسال، وقل أي جزء خاطئ.

لا تفعل

• استخدامه لتاريخ ميلاد: فالتقويم طريق بطيء للوصول إلى 1990. استخدم حقل التاريخ.
• استخدام <input type="date"> حيث تكون الصفحة بالعربية: فتقويمه بلغة المتصفح.
• تخزين التاريخ لحظةً زمنية (منتصف ليل في منطقة زمنية): فهو يوم.

الرموز

الرموز التي يستخدمها (13)

--al-color-surface، --al-color-surface-sunk، --al-color-accent، --al-color-accent-hover، --al-color-on-accent، --al-color-control، --al-color-focus، --al-color-text-muted، --al-size-control-sm، --al-size-control-md، --al-space-2، --al-space-3، --al-radius-sm