Time Field
ورودی زمان با بخشهای جداگانهٔ ساعت/دقیقه/(ثانیه)/(ق.ظ-ب.ظ) که هرکدام جدا فوکوس میگیرند؛ تایپ رقم مستقیم مقدار میگذارد و فلش بالا/پایین افزایش/کاهش میدهد.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/time-field.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/time-field.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/time-field.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/time-field.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { TimeField } from "@/components/ui/time-field"
<TimeField value={time} onChange={setTime} aria-label="زمان جلسه" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
مقدار یک شیء سادهٔ با فیلدهای 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 پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
با برچسب
این نمونه هنوز برای 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) | ساعتی که با قاعدهٔ فرم نمیخواند، مثل خارج از ساعت کاری |