منتقي نطاق التاريخ
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 + 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. | |
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. الإعدادات الجاهزة أزرار عادية، فيصل إليها مستخدم لوحة المفاتيح.