TimeInput
An input field alllow user enter specify time.
Basic
Basic example of TimeInput.
:
Time range input
Basic example for TimeInputRange.
:
:
Controlled
Controlled usage.
:
:
:
Display seconds
We can also enable seconds for input.
: :
Display AM or PM
Setting
format prop to '12' to change time to 12 hours format :
Sizes
There's three sizes of option for TimeInput.
:
:
:
Disabled
Disabled TimeInput.
:
Affix
TimeInput can have
suffix or prefix content inside. :
:
Invalid state
Display TimeInput as invalid status when
invalid prop is set to true. :
API
TimeInput
| Prop | Description | Type | Default |
|---|---|---|---|
| amLabel | Display string for AM | 'string' | 'am' |
| amPmPlaceholder | Placeholder for AM/PM field | 'string' | 'am' |
| clearable | Whether allow to clear value | boolean | true |
| defaultValue | Default value of TimeInput (use value instead if it is controlled) | Date | - |
| disabled | Whether TimeInput is disabled | boolean | false |
| format | Determine time format | '12' | '24' | '24' |
| invalid | Whether the TimeInput is invalid status | boolean | - |
| nextRef | Ref to focus after final TimeInput field, can be used by TimeInputRange | RefObject | - |
| onChange | Callback when TimeInput value changed | (value: Date) => void | - |
| pmLabel | Display string for PM | 'string' | 'pm' |
| prefix | Render a prefix content inside TimeInput | string | ReactNode | - |
| showSeconds | Whether display seconds input field | boolean | - |
| size | TimeInput size | 'lg' | 'md' | 'sm' | 'md' |
| suffix | Render a suffix content inside TimeInput | string | ReactNode | ReactNode |
| timeFieldPlaceholder | Time field placeholder | 'string' | '--' |
| timeFieldClass | Extra class for time field | 'string' | - |
| value | Value of TimeInput (Controlled) | Date | - |
TimeInput.TimeInputRange
| Prop | Description | Type | Default |
|---|---|---|---|
| amLabel | Display string for AM | 'string' | 'am' |
| amPmPlaceholder | Placeholder for AM/PM field | 'string' | 'am' |
| clearable | Whether allow to clear value | boolean | true |
| defaultValue | Default value of TimeInputRange (use value instead if it is controlled) | Date | - |
| disabled | Whether TimeInputRange is disabled | boolean | false |
| format | Determine time format | '12' | '24' | '24' |
| invalid | Whether the TimeInputRange is invalid status | boolean | - |
| nextRef | Ref to focus after final TimeInputRange field, can be used by TimeInputRangeRange | RefObject | - |
| onChange | Callback when TimeInputRange value changed | (value: Date) => void | - |
| pmLabel | Display string for PM | 'string' | 'pm' |
| prefix | Render a prefix content inside TimeInputRange | string | ReactNode | - |
| separator | Seperator between time inputs | 'string' | '24' | '~' |
| showSeconds | Whether display seconds input field | boolean | - |
| size | TimeInputRange size | 'lg' | 'md' | 'sm' | 'md' |
| suffix | Render a suffix content inside TimeInputRange | string | ReactNode | ReactNode |
| timeFieldPlaceholder | Time field placeholder | 'string' | '--' |
| timeFieldClass | Extra class for time field | 'string' | - |
| value | Value of TimeInputRange (Controlled) | Date | - |