منتقي الفترة بالتقويمين
حقل فترة زمنية بنافذة من شهرين تتبدّل بين التقويم الميلادي والهجري (أم القرى)، وتحت كل يوم هجري تاريخه الميلادي.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add dual-date-range-pickerويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/dual-date-range-pickerأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { DualDateRangePicker } from "@/components/ui/dual-date-range-picker";<DualDateRangePicker label="Travel dates" onValueChange={(range, calendar) => …} />أمثلة
مرجع الخصائص
DualDateRangePicker
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
value / defaultValue | DateRange | لا يوجد | الفترة بتواريخ JavaScript، أيًا كان التقويم. |
onValueChange | (range, calendar) => void | لا يوجد | مع التقويم الذي اختيرت فيه. |
calendar / defaultCalendar | "gregorian" | "hijri" | "gregorian" | خاصية Calendar. |
label / required / helperText / error / disabled / placeholder | … | لا يوجد | كما في حقل الإدخال. |
DualDateRangeMenu
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
value / calendar / onApply / onCancel / numberOfMonths | … | لا يوجد | النافذة وحدها، لوضعها في مكان آخر. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| EnterSpace | يفتح النافذة. |
| ArrowRightArrowLeftArrowUpArrowDown | بين الأيام؛ في العربية اليوم التالي ArrowLeft. |
| Escape | يغلق دون تغيير. |
ARIA
- مبدّل التقويم مجموعة اختيار مسمّاة، وعدد الأيام يُعلن بأدب.
- التاريخ الميلادي الصغير للعين؛ اسم اليوم المنطوق يقوله.
ملاحظات العربية والاتجاه
ينعكس
- الأشهر تُقرأ من اليمين، والأسبوع يبدأ بالسبت، والأسهم تنعكس.
- المبدّل في البداية على اليمين، وزر التطبيق في النهاية على اليسار.
لا ينعكس
- أرقام الأيام كما هي داخل خلاياها.
- الأرقام
- أرقام غربية افتراضيًا؛
numeralsفي RitlaProvider يغيّرها. - الخط العربي
-
numeric-14للأيام وnumeric-12للتاريخ الميلادي الصغير. - النص ثنائي الاتجاه
- الفترة بالكلمات «8 أكتوبر إلى 14 أكتوبر 2026» بلا شرطة، لأن الشرطة بين الأرقام تنقلب في العربية.