Time Fieldv1.0.0
ورودی زمان با بخش‌های جداگانهٔ ساعت/دقیقه/(ثانیه)/(ق.ظ-ب.ظ) که هرکدام جدا فوکوس می‌گیرند؛ تایپ رقم مستقیم مقدار می‌گذارد و فلش بالا/پایین افزایش/کاهش می‌دهد.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/time-field.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/time-field.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/time-field.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/time-field.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { TimeField } from "@/components/ui/time-field"
<TimeField value={time} onChange={setTime} aria-label="زمان جلسه" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
مقدار یک شیء سادهٔ با فیلدهای hour، minute و second (اختیاری) است، نه رشته؛ چون هیچ فرمت متنی واحدی برای همهٔ زبان‌ها درست نیست، پارس/فرمت را خودِ کامپوننت انجام می‌دهد.
هر بخش یک span[role=spinbutton] مستقل است؛ برای فرم واقعی آن را داخل Label/Fieldset بگذارید.
دسترس‌پذیری
- هر بخش role=spinbutton با aria-valuemin/max/now/text جداگانه دارد.
- فلش راست/چپ بین بخش‌ها جابه‌جا می‌شود (چون زمان همیشه چپ‌به‌راست نمایش داده می‌شود، حتی در صفحهٔ راست‌به‌چپ)، فلش بالا/پایین مقدار همان بخش را تغییر می‌دهد.
- تایپ رقم مستقیم مقدار می‌گذارد و بعد از پر شدن بخش (یا رد شدن از بیشینه) خودکار به بخش بعدی می‌رود.
- Backspace بخشِ فوکوس‌شده را به کمینه برمی‌گرداند.
مرجع API
TimeField
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / defaultValue | { hour: number; minute: number; second?: number } | null | — | مقدار کنترل‌شده یا اولیه. |
| onChange | (value) => void | — | فراخوانی هنگام تغییر هر بخش. |
| hourCycle | 12 | 24 | 24 | حالت ۱۲ یا ۲۴ ساعته؛ ۱۲ یک بخش ق.ظ/ب.ظ اضافه می‌کند. |
| showSeconds | boolean | false | نمایش بخش ثانیه. |
| disabled | boolean | false | غیرفعال کردن کل فیلد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
با برچسب
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
حالت ۱۲ساعته (ق.ظ/ب.ظ)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
با ثانیه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدون مقدار اولیه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
غیرفعال
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نامعتبر (Invalid)
TimeField پراپ invalid ندارد؛ aria-invalid را مستقیم بدهید و پیام را با aria-describedby وصل کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| با برچسب | فرم رزرو یا زمان‌بندی جلسه که باید بگوید این فیلد ساعت چه چیزی است |
| حالت ۱۲ساعته (ق.ظ/ب.ظ) | کاربری که با ساعتِ ق.ظ/ب.ظ راحت‌تر است تا ۲۴ساعته |
| با ثانیه | ثبت زمان دقیق برای رویدادی مثل شروع یک پخش زنده |
| بدون مقدار اولیه | فیلد اختیاری زمان که کاربر باید خودش پر کند |
| غیرفعال | ساعتی که سیستم تعیین کرده و کاربر اجازهٔ تغییرش را ندارد |
| نامعتبر (Invalid) | ساعتی که با قاعدهٔ فرم نمی‌خواند، مثل خارج از ساعت کاری |