منتقي التاريخ
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 + aria-required. | |
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، ولزر تبديل التقويم اسم متاح.
تُعلن التواريخ بنظام التقويم النشط، فيسمع مستخدمو الهجري تواريخ هجرية.