حقل التاريخ والوقت
حقل للتاريخ وآخر للوقت جنبًا إلى جنب، كلاهما من حقل الإدخال النصي. يفتح الأول منتقي التاريخ والثاني منتقي الوقت، ويقبل كلاهما الكتابة.
التثبيت
npx sdaia-ui@latest add date-time-field
الاستخدام
import { DateTimeField } from "@/components/ui/DateTimeField"<DateTimeField legend="Appointment" dateLabel="Date" timeLabel="Time" value={value} onChange={setValue} />افتراضي
تاريخ ووقت جنبًا إلى جنب مع رسالة مساعدة واحدة تحت الحقلين.
جارٍ تحميل العرض التوضيحي: date-time-field-default
أمثلة
خطأ
يُتحقق من الزوج معًا: وقت في الماضي يلوّن الحقلين بالأحمر مع رسالة واحدة.
جارٍ تحميل العرض التوضيحي: date-time-field-error
مرشح بنظام 24 ساعة
مرشح تدقيق اختياري بنظام 24 ساعة.
جارٍ تحميل العرض التوضيحي: date-time-field-24-hour
RTL
ينعكس الحقلان والتسميات: التاريخ في البداية (اليمين).
جارٍ تحميل العرض التوضيحي: date-time-field-rtl
الخصائص
الخاصية | النوع | القيمة الافتراضية | مطلوبة |
|---|---|---|---|
value | { date: Date | null; time: TimeValue | null } | — | اختيارية |
defaultValue | DateTimeFieldValue | { date: null, time: null } | اختيارية |
onChange | (value, text: { date; time }) => void | — | اختيارية |
legend | string | — | اختيارية |
dateLabel / timeLabel | string | — | اختيارية |
datePlaceholder / timePlaceholder | string | — | اختيارية |
helperText | string | — | اختيارية |
error | string | — | اختيارية |
timeFormat | "12-hour" | "24-hour" | "12-hour" | اختيارية |
calendar | DatePickerCalendar | "gregorian" | اختيارية |
locale | string | from dir / page | اختيارية |
minDate / maxDate | Date | — | اختيارية |
formatDate / parseDate | (date) => string / (text) => Date | null | — | اختيارية |
timePickerTitle / minuteStep | string / number | — / 5 | اختيارية |
labels | Partial<DateTimeFieldLabels> | — | اختيارية |
required / disabled / size / dir | — | — | اختيارية |
إمكانية الوصول
- حقلان مسمّيان داخل <fieldset> مع <legend>؛ وترتبط رسالة مساعدة أو خطأ واحدة بكليهما عبر aria-describedby، ويضبط الخطأ aria-invalid على الحقلين ويُعلَن عنه.
- كل حقل combobox بخاصية aria-haspopup="dialog": النقر أو Enter أو السهم لأسفل يفتح منتقيه، وتنقل لوحة المفاتيح التركيز داخله (اليوم أو الساعة المحددة)، وEscape والإلغاء والإرسال والتطبيق تعيد التركيز إلى الحقل.
- القيم المكتوبة تعمل دون المنتقيين: 2026-10-12 و12/10/2026 و12 Oct 2026 و12 أكتوبر 2026 للتاريخ، وس س:د د (مع AM/PM أو ص/م) للوقت.
- ترتيب التركيز: التاريخ ثم الوقت في الاتجاهين.
السلوك المتجاوب
- يتشارك الحقلان السطر (فاصل 16 بكسل على سطح المكتب). تحت نحو 464 بكسل يلتف حقل الوقت تحت حقل التاريخ فتبقى الرسالة المشتركة تحت الزوج.
- تحت 1024 بكسل تستخدم نافذة التاريخ تخطيط الجوال لمنتقي التاريخ بعرض الشاشة ناقص هوامش 16 بكسل.