منتقي نطاق التاريخ
DateRangePickerمنتقي نطاق تاريخ متاح الوصول في React لتاريخي البداية والنهاية على تقويم واحد. يدعم الإعدادات الجاهزة، العرضين الهجري والميلادي، والحدود، ويشارك DatePicker نواته.
يحدد DateRangePicker نطاقاً { start, end } ويظلل الأيام بينهما. يتشارك مع DatePicker زر التبديل بين الميلادي والهجري ونواة التقويم.
متى تستخدمه
استخدم DateRangePicker لفترات التقارير، طلبات الإجازة، نوافذ الحجز، أو أي عامل تصفية ببداية ونهاية. وفر إعدادات جاهزة مثل "آخر 30 يوماً" للنطاقات الشائعة. إذا كفى تاريخ واحد، استخدم DatePicker.
يتشارك المنتقيان زر التبديل الهجري، مما يتيح استخدام النطاق نفسه مع تقويم أم القرى.
أمثلة
الخصائص
الخصائص التي يعرفها DateRangePicker. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "md" | "lg" | ||
variant | "default" | "filled-lighter" | "filled-darker" | ||
value | DateRange | Currently selected range (controlled). null clears it. | |
defaultValue | DateRange | Initial range when uncontrolled. | |
onChange | (value: DateRange | null) => void | Fires when a complete range is picked, or 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 either end is empty. | |
startName | string | Submits the start date under this name in native forms (FormData), as a Gregorian
YYYY-MM-DD string even while the calendar displays Hijri. Empty submits "". | |
endName | string | Submits the end date under this name. Same format as startName. | |
form | string | Associates both hidden inputs 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. | |
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. | |
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. Helps cross-reference Hijri↔Gregorian. Default false. |
إمكانية الوصول
يستخدم تقويم النطاق نموذج لوحة المفاتيح نفسه في DatePicker. تتنقل مفاتيح الأسهم بين الأيام، ويغير Page Up وPage Down الشهر. ويختار Enter البداية ثم النهاية. يعلن قارئ الشاشة النطاق المحدد.
ترتبط تسمية الحقل، النص المساعد، ورسالة الخطأ بالحقل كما في TextInput. تعمل الإعدادات الجاهزة كأزرار عادية، لذا يصل إليها مستخدم لوحة المفاتيح.