React Time Picker Component API
Time Picker API
Explore the API reference for the React Time Picker component and discover how to effectively utilize its props for customization.
CTimePicker#
import { CTimePicker } from '@coreui/react-pro'// orimport CTimePicker from '@coreui/react-pro/src/components/time-picker/CTimePicker'| Property | Default | Type |
|---|---|---|
| ampm#4.8.0+ | auto | boolean, 'auto' |
Set if the component should use the 12/24 hour format. If | ||
| cancelButton# | Cancel | ReactNode |
Toggle visibility or set the content of cancel button. | ||
| cancelButtonColor# | primary | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
Sets the color context of the cancel button to one of CoreUI’s themed colors. | ||
| cancelButtonSize# | sm | 'sm', 'lg' |
Size the cancel button small or large. | ||
| cancelButtonVariant# | ghost | 'outline', 'ghost' |
Set the cancel button variant to an outlined button or a ghost button. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
| cleaner# | true | ReactNode |
Toggle visibility or set the content of the cleaner button. | ||
| confirmButton# | OK | ReactNode |
Toggle visibility or set the content of confirm button. | ||
| confirmButtonColor# | primary | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
Sets the color context of the confirm button to one of CoreUI’s themed colors. | ||
| confirmButtonSize# | sm | 'sm', 'lg' |
Size the confirm button small or large. | ||
| confirmButtonVariant# | - | 'outline', 'ghost' |
Set the confirm button variant to an outlined button or a ghost button. | ||
| container# | dropdown | 'dropdown', 'inline' |
Set container type for the component. | ||
| disabled# | - | boolean |
Toggle the disabled state for the component. | ||
| dropdownClassNames# | - | string |
A string of all className you want applied to the dropdown menu. | ||
| feedback#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackInvalid#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackValid#4.2.0+ | - | ReactNode |
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, | ||
| floatingClassName#4.5.0+ | - | string |
A string of all className you want applied to the floating label wrapper. | ||
| footer# | true | boolean |
Toggle visibility of footer element. | ||
| footerContent# | - | ReactNode |
Add custom elements to the footer. | ||
| hours#5.0.0+ | - | number[], ((hour: number) => number[]) |
Specify a list of available hours using an array, or customize the filtering of hours through a function. | ||
| id#5.3.0+ | - | string |
Set the id attribute for the input element. | ||
| indicator# | true | ReactNode |
Toggle visibility or set the content of the input indicator. | ||
| inputOnChangeDelay#5.0.0+ | 750 | number |
Defines the delay (in milliseconds) for the input field's onChange event. | ||
| inputReadOnly# | - | boolean |
Toggle the readonly state for the component. | ||
| invalid# | - | boolean |
Set component validation state to invalid. | ||
| label#4.2.0+ | - | ReactNode |
Add a caption for a component. | ||
| locale# | default | string |
Sets the default locale for components. If not set, it is inherited from the browser. | ||
| minutes#5.0.0+ | true | boolean, number[], ((minute: number) => number[]) |
Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function. | ||
| name#5.3.0+ | - | string |
Set the name attribute for the input element. | ||
| onHide# | - | () => void |
Callback fired when the component requests to be hidden. | ||
| onShow# | - | () => void |
Callback fired when the component requests to be shown. | ||
| onTimeChange# | - | (timeString: string, localeTimeString?: string, date?: Date) => void |
Callback fired when the time changed. | ||
| placeholder# | Select time | string |
Specifies a short hint that is visible in the input. | ||
| portal#5.9.0+ | false | boolean |
Generates dropdown menu using createPortal. | ||
| required#4.10.0+ | - | boolean |
When present, it specifies that time must be filled out before submitting the form. | ||
| seconds#4.8.0+ | true | boolean, number[], ((second: number) => boolean) |
Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function. | ||
| size# | - | 'sm', 'lg' |
Size the component small or large. | ||
| text#4.2.0+ | - | ReactNode |
Add helper text to the component. | ||
| time# | - | string, Date |
Initial selected time. | ||
| toggler# | - | ReactNode |
The content of toggler. | ||
| tooltipFeedback#4.2.0+ | - | boolean |
Display validation feedback in a styled tooltip. | ||
| valid# | - | boolean |
Set component validation state to valid. | ||
| variant# | roll | 'roll', 'select' |
Set the time picker variant to a roll or select. | ||
| visible# | - | boolean |
Toggle the visibility of dropdown menu component. | ||