إدخال الوقت
حقل إدخال نصي بأيقونة ساعة لإدخال وقت من اليوم. يكتب المستخدم الوقت بصيغة س س:د د أو يفتح منتقي الوقت كاختصار.
التثبيت
npx sdaia-ui@latest add time-input
الاستخدام
import { TimeInput } from "@/components/ui/TimeInput"<TimeInput label="Time" placeholder="HH:MM" value={time} onChange={setTime} />افتراضي
حقل فارغ مع تلميح الصيغة. انقر أو اضغط Enter أو السهم لأسفل لفتح المنتقي.
جارٍ تحميل العرض التوضيحي: time-input-default
أمثلة
مكتمل
تم إدخال وقت.
جارٍ تحميل العرض التوضيحي: time-input-filled
نظام 24 ساعة
نص ومنتقٍ بنظام 24 ساعة، بفواصل 15 دقيقة.
جارٍ تحميل العرض التوضيحي: time-input-24-hour
خطأ
«25:00» ليس وقتًا: تُرجع onChange قيمة فارغة فيعرض الحقل خطأ.
جارٍ تحميل العرض التوضيحي: time-input-error
معطّل
لا يمكن تعديل الحقل ولا يفتح المنتقي.
جارٍ تحميل العرض التوضيحي: time-input-disabled
مفتوح
يفتح منتقي الوقت تحت مربع الحقل.
جارٍ تحميل العرض التوضيحي: time-input-open
RTL
تنعكس التسمية وأيقونة الساعة وتبقى الأرقام من اليسار إلى اليمين.
جارٍ تحميل العرض التوضيحي: time-input-rtl
الخصائص
الخاصية | النوع | القيمة الافتراضية | مطلوبة |
|---|---|---|---|
value | TimeValue | null | — | اختيارية |
defaultValue | TimeValue | null | null | اختيارية |
defaultInputValue | string | — | اختيارية |
onChange | (time: TimeValue | null, text: string) => void | — | اختيارية |
format | "12-hour" | "24-hour" | "12-hour" | اختيارية |
label / placeholder / helperText / error | string | — | اختيارية |
pickerTitle | string | — | اختيارية |
pickerFooter | boolean | true | اختيارية |
minuteStep | number | 5 | اختيارية |
open / defaultOpen / onOpenChange | boolean / (open) => void | — | اختيارية |
labels | Partial<TimeInputLabels> | — | اختيارية |
disabled / required / size / dir | — | — | اختيارية |
إمكانية الوصول
- الحقل combobox بخاصية aria-haspopup="dialog" (نمط منتقي التاريخ في APG)، مسمّى عبر <label for>، ويُربط النص المساعد ورسالة الخطأ عبر aria-describedby.
- النقر أو Enter أو السهم لأسفل يفتح المنتقي، وتنقل لوحة المفاتيح التركيز إلى الساعة المحددة. Escape والإلغاء والتطبيق تغلقه وتعيد التركيز إلى الحقل، وكذلك النقر خارجه أو مغادرته بمفتاح Tab.
- الصيغة المكتوبة تعمل دون المنتقي: تُفهم 9:30 و09:30 و0930 و21:30 و9:30 pm وص/م والأرقام العربية الهندية، ويُنسَّق الوقت الصالح عند مغادرة الحقل.
- المنتقي نافذة حوار مسمّاة وأعمدته قوائم اختيار (انظر منتقي الوقت).
السلوك المتجاوب
- الحقل مرن، والنافذة المنبثقة تحتفظ بعرض المنتقي ولا تتجاوز عرض الشاشة ناقص هوامش 16 بكسل.
- الحجم غير المعيَّن يتبع حقل الإدخال النصي: متوسط تحت 768px وكبير من 768px.