منتقي التاريخ
DatePickerمنتقي تاريخ متاح الوصول في React يدعم التبديل داخل التقويم بين الهجري (أم القرى) والميلادي، الحدين الأدنى والأقصى، والعربية. القيمة دائماً Date.
يختار DatePicker تاريخاً واحداً، ويتيح التبديل بين التقويمين الميلادي والهجري داخل التقويم. تبقى القيمة دائماً Date | null، ويقتصر العرض الهجري على إظهار التاريخ.
متى تستخدمه
استخدم DatePicker لتاريخ واحد مثل تاريخ الميلاد، الموعد، أو تاريخ إصدار الوثيقة. تحتاج الخدمات السعودية غالباً إلى التقويمين: فعل العرض الهجري وshowSecondaryCalendar ليظهر مع كل يوم مقابله.
قيد النطاق بـ minValue وmaxValue لمنع التواريخ غير الصالحة. لتاريخي بداية ونهاية، استخدم DateRangePicker.
أمثلة
الخصائص
الخصائص التي يعرفها DatePicker. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "md" | "lg" | ||
variant | "default" | "filled-lighter" | "filled-darker" | ||
value | Date | Currently selected date (controlled). Local Y/M/D. | |
defaultValue | Date | Initial value when uncontrolled. | |
onChange | (value: Date | null) => void | Fires whenever the user picks a day. null when cleared. | |
minValue | Date | Earliest pickable date (inclusive). | |
maxValue | Date | Latest pickable date (inclusive). | |
label | react.ReactNode | Visible label above the trigger. | |
helperText | react.ReactNode | Hint shown below the trigger. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the trigger when error is true. | |
error | boolean | Marks the field invalid - sets aria-invalid and error styling. | |
required | boolean | Marks the field required: adds the asterisk and aria-required, and blocks native form
submission while empty. | |
name | string | Submits the value under this name in native forms (FormData), as a Gregorian YYYY-MM-DD
string even while the calendar displays Hijri. Empty submits ""; disabled doesn't submit. | |
form | string | Associates the hidden input with a <form> by id, like the native form attribute. | |
disabled | boolean | Disables the trigger entirely. | |
readOnly | boolean | Read-only: value is shown but not editable (segments + calendar locked). | |
id | string | Caller-supplied id for the field. | |
className | string | Forwarded to the Group (the trigger row), matching Input/Select. | |
aria-label | string | ||
aria-labelledby | string | ||
calendar | CalendarSystem | Calendar system (controlled). Omit to let the user toggle freely with the in-popover switch. | |
defaultCalendar | CalendarSystem | Initial calendar system when uncontrolled. Defaults to 'gregorian'. | |
onCalendarChange | (calendar: CalendarSystem) => void | Fires whenever the calendar system toggles. | |
showCalendarToggle | boolean | Show the Gregorian↔Hijri toggle inside the popover. Defaults to true,
but is forced off when calendar is controlled - a toggle that ignores
its click is a worse footgun than no toggle. | |
calendarLabels | CalendarLabels | Override the toggle labels. Defaults are locale-aware (English / Arabic). | |
showSecondaryCalendar | boolean | When true, each day cell also shows the other calendar's day number
as small secondary text (e.g., Hijri active → Gregorian day shown small
underneath). Helps users cross-reference dates between calendar systems
without round-tripping the toggle. Defaults to false. |
إمكانية الوصول
يتبع التقويم نموذج الشبكة من React Aria. تتنقل مفاتيح الأسهم بين الأيام، ويغير Page Up وPage Down الشهر. ويغلق Escape اللوحة المنبثقة. ترتبط تسمية الحقل، النص المساعد، ورسالة الخطأ بالحقل كما في TextInput. ولزر تبديل التقويم اسم متاح الوصول.
يعلن قارئ الشاشة التواريخ بنظام التقويم النشط، لذا يسمع مستخدمو التقويم الهجري تواريخ هجرية.