ورودی زمان (TimeInput)
فیلد ورودی که به کاربر امکان وارد کردن زمان مشخصی را میدهد.
پایه (Basic)
مثال پایهای از ورودی زمان.
:
ورودی بازه زمانی (Time range input)
مثال پایهای برای ورودی بازه زمانی.
:
:
کنترلی (Controlled)
استفاده کنترلشده.
:
:
:
نمایش ثانیهها
ما همچنین میتوانیم ثانیهها را برای ورودی فعال کنیم.
: :
نمایش AM یا PM
با تنظیم ویژگی
format به '12' زمان را به فرمت ۱۲ ساعته تغییر دهید. :
اندازهها (Sizes)
سه اندازه مختلف برای ورودی زمان وجود دارد.
:
:
:
غیرفعال (Disabled)
ورودی زمان غیرفعال.
:
افیکس (Affix)
ورودی زمان میتواند محتوای
suffix یا prefix را در داخل خود داشته باشد. :
:
وضعیت نامعتبر (Invalid state)
نمایش ورودی زمان به عنوان وضعیت نامعتبر زمانی که ویژگی
invalid برابر true باشد. :
API
ورودی زمان (TimeInput)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| amLabel | رشته نمایشی برای صبح | 'string' | 'am' |
| amPmPlaceholder | Placeholder برای فیلد صبح/بعدازظهر | 'string' | 'am' |
| clearable | آیا امکان پاک کردن مقدار وجود دارد | boolean | true |
| defaultValue | مقدار پیشفرض برای TimeInput (اگر کنترل شده است از value استفاده کنید) | Date | - |
| disabled | آیا TimeInput غیرفعال است | boolean | false |
| format | فرمت زمان را تعیین میکند | '12' | '24' | '24' |
| invalid | آیا TimeInput در وضعیت نامعتبر است | boolean | - |
| nextRef | رفرنس برای تمرکز پس از آخرین فیلد TimeInput، میتواند توسط TimeInputRange استفاده شود | RefObject | - |
| onChange | کال بک زمانی که مقدار TimeInput تغییر کرد | (value: Date) => void | - |
| pmLabel | رشته نمایشی برای بعدازظهر | 'string' | 'pm' |
| prefix | نمایش محتوای پیشوند در داخل TimeInput | string | ReactNode | - |
| showSeconds | آیا فیلد ثانیه نمایش داده میشود | boolean | - |
| size | اندازه TimeInput | 'lg' | 'md' | 'sm' | 'md' |
| suffix | نمایش محتوای پسوند در داخل TimeInput | string | ReactNode | ReactNode |
| timeFieldPlaceholder | Placeholder برای فیلد زمان | 'string' | '--' |
| timeFieldClass | کلاس اضافی برای فیلد زمان | 'string' | - |
| value | مقدار TimeInput (کنترل شده) | Date | - |
ورودی رنج زمانی (TimeInput.TimeInputRange)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| amLabel | رشته نمایشی برای صبح | 'string' | 'am' |
| amPmPlaceholder | Placeholder برای فیلد صبح/بعدازظهر | 'string' | 'am' |
| clearable | آیا امکان پاک کردن مقدار وجود دارد | boolean | true |
| defaultValue | مقدار پیشفرض برای TimeInputRange (اگر کنترل شده است از value استفاده کنید) | Date | - |
| disabled | آیا TimeInputRange غیرفعال است | boolean | false |
| format | فرمت زمان را تعیین میکند | '12' | '24' | '24' |
| invalid | آیا TimeInputRange در وضعیت نامعتبر است | boolean | - |
| nextRef | رفرنس برای تمرکز پس از آخرین فیلد TimeInputRange، میتواند توسط TimeInputRangeRange استفاده شود | RefObject | - |
| onChange | کال بک زمانی که مقدار TimeInputRange تغییر کرد | (value: Date) => void | - |
| pmLabel | رشته نمایشی برای بعدازظهر | 'string' | 'pm' |
| prefix | نمایش محتوای پیشوند در داخل TimeInputRange | string | ReactNode | - |
| separator | فاصلگذار بین ورودیهای زمان | 'string' | '24' | '~' |
| showSeconds | آیا فیلد ثانیه نمایش داده میشود | boolean | - |
| size | اندازه TimeInputRange | 'lg' | 'md' | 'sm' | 'md' |
| suffix | نمایش محتوای پسوند در داخل TimeInputRange | string | ReactNode | ReactNode |
| timeFieldPlaceholder | Placeholder برای فیلد زمان | 'string' | '--' |
| timeFieldClass | کلاس اضافی برای فیلد زمان | 'string' | - |
| value | مقدار TimeInputRange (کنترل شده) | Date | - |